React-useCallback与useMemo

useCallback(fn, deps)

• 输入：内联回调函数，依赖项数组
• 输出：传入的回调函数的memoized版本

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useCallback的用法与useState的用法基本一致，但最后会返回一个函数，用一个变量保存起来。它不影响代码逻辑，主要面向对性能要求较高的人。如果你将返回的这个回调函数传递给 经过优化的子组件时（比如用memo包裹导出的子组件），它将非常有用。

经过useCallback包装后输出的回调函数仅在某个依赖项改变时才会更新/重新生成。记得子组件导出时使用memo包裹一下，其作用是对组件前后两次进行浅对比，阻止不必要的更新。

详细案例可以参考《详解 React useCallback & useMemo》

可以发现，只有经过useCallback优化之后的button2是点击自身时才会变更，其他两个只要父组件更新后都会变更。注意子组件<Button>是经过React.memo方法包裹的，该方法内会对props做一个浅比较，如果props没有发生改变，则不会重新渲染此组件。

在JavaScript中，两个看起来相同的函数却是不相等的。

const a = () => {};
const b = () => {};
a === b; // false

在子组件<Button>中需要一个onClickButton的props，尽管组件内部有memo做优化，但是传递给组件的handleClickButton1是直接定义的一个方法，这就导致了只要是父组件的重新渲染（包括父组件中状态或者props的更新），就会导致这里声明出一个新的方法。

新旧方法即使一模一样，但依旧是两个不同的对象。此时子组件的memo对比发现对象的props改变，就会重新渲染。

const [count1, setCount1] = useState(0);
// ...
const handleClickButton1 = () => {
  setCount1(count1 + 1);
};
// ...
return <Button onClickButton={handleClickButton1}>Button1</Button>

而handleClickButton2是使用了useCallback包装了一层后的回调函数。其中依赖变量count2来决定是否返回一个新的函数，函数内部作用域也随之更新。

const handleClickButton2 = useCallback(() => {
  setCount2(count2 + 1);
}, [count2]);

来看另一个例子，如果将useCallback依赖的第二个参数变成一个空数组，这表示这个方法没有依赖值，将不会被更新。且由于JS的静态作用域导致此函数内count2永远都是0。

此时点击多次button2查看变化，会发现button2后面的值只会改变一次，因为该函数内的count2永远都是0，就意味着每次都是0+1，button所接受的count props，也只会从0变成1且一直都将是1。而且handleClickButton2也因为没有依赖项不会返回新的方法，就只导致button组件只会因为count改变而更新一次

import React, { useState, useCallback } from 'react';
import Button from './Button';

export default function App() {
  const [count2, setCount2] = useState(0);

  const handleClickButton2 = useCallback(() => {
    setCount2(count2 + 1);
  }, []);

  return (
    <Button 
      count={count2}
      onClickButton={handleClickButton2}
    >Button2</Button>
  );
}

上述提到的是不更新所带来的问题，接下来在看一个频繁更新所带来的问题。

以下例子中可以看到handleSubmit 会依赖 text 的更新而去更新，在 input 的使用中 text 的变化肯定是相当频繁的，假如这时候我们的 OtherForm 是一个很大的组件，必须要进行优化这个时候可以使用 useRef 来帮忙。使用 useRef 可以生成一个变量让其在组件每个生命周期内都能访问到，且handleSubmit 并不会因为 text 的更新而更新，也就不会让 OtherForm 多次渲染。

const [text, setText] = useState('');

const handleSubmit = useCallback(() => {
  // ...
}, [text]);

return (
  <form>
    <input value={text} onChange={(e) => setText(e.target.value)} />
    <OtherForm onSubmit={handleSubmit} />
  </form>
);

useMemo(()=>fn, deps)

• 输入：创建函数，依赖项数组
  该创建函数会需要返回一个值，只有在依赖项发生改变的时候，才会重新调用此函数，返回一个新的值。

useMemo也能针对传入子组件的值进行缓存优化。

// ...
const [count, setCount] = useState(0);

const userInfo = useMemo(() => {
  return {
    // ...
    name: "Jace",
    age: count
  };
}, [count]);

return <UserCard userInfo={userInfo}>

// ...
const [count, setCount] = useState(0);

const userInfo = {
  // ...
  age: count,
  name: 'Jace'
}

return <UserCard userInfo={userInfo}>

很明显的上面的 userInfo 每次都将是一个新的对象，无论 count 发生改变没，都会导致 UserCard 重新渲染，而下面的则会在 count 改变后才会返回新的对象。

除此之外，还可以把一些昂贵的计算逻辑放到 useMemo 中，只有当依赖值发生改变的时候才去更新。

const num = useMemo(() => {
  let num = 0;
  // 这里使用 count 针对 num 做一些很复杂的计算，当 count 没改变的时候，组件重新渲染就会直接返回之前缓存的值。
  return num;
}, [count]);

return <div>{num}</div>

结论

• 是否要把所有的方法都用useCallback包裹一层？-不要
  注意：useCallback要配合子组件的shouldComponentUpdate或者React.memo一起来使用的，否则就是反向优化

• useCallback与useMemo有什么区别？-前者缓存的是函数，后者缓存的是函数的返回值
  useCallback 是来优化子组件的，防止子组件的重复渲染。useMemo 可以优化当前组件也可以优化子组件，优化当前组件主要是通过 memoize 来将一些复杂的计算逻辑进行缓存。

补充js中的作用域

JavaScript中采用词法作用域。因此函数的作用域在函数定义的时候就决定了。

// 个人理解：在全局作用域下定义了两个函数对象print和foo，执行foo的时候，foo内部又调用了print函数，print函数内部需要打印value值，此时查看print函数所在的作用域（该函数在函数定义的时候作用域就决定了），只有全局作用域中的value为1，因此打印1
var value = 1;
function print(){
  console.log(value);
}
function foo(){
  var value = 2;
  print();
}
foo();// 1

// 个人理解：执行foo函数，foo函数内又执行print函数，print函数的作用域是foo内，因此其内部打印的vaule要沿着环境作用域链向上查找
var value = 1;
function foo(){
  var value = 2;
  function print(){
    console.log(value); 
 }
  print();
}
foo();//2

以上就是js的静态作用域所造成的区别。