React Hooks 使用useCallback和useMemo 进行性能优化及使用场景

本文已参与[新人创作礼]活动，一起开启掘金创作之路。

useMemo和useCallback是react hooks中进行性能优化的两个hooks,都会在组件第一次加载时执行，后面会根据其依赖项发生变化时，会再次执行，

useMemo和useCallback的区别

useMemo 缓存的是变量， useCallback 缓存的是函数

1. useMemo的使用场景：

当父组件更新某一个状态state时，会去渲染其所有的子组件，显然性能是不是最优的，当状态A发生变化时，只重新渲染依赖状态A的子组件，其他子组件不需要重新渲染，则可以用useMemo（（）=>(),[依懒项]）来将组件包裹起来，仅当依赖性发生变化时，才重新渲染，达到一种缓存的效果

export default function Memo() {
    const [count, setCount] = useState(2);
    const [value, setValue] = useState('11');
    const finallyCount = useMemo(() => {
        console.log('code shu');
        let sum = 0;
        for (let i = 0; i < count * 999; i++) {
            sum += i;
        }
        return sum;
    }, [count]);
 
    return <div>
        <h4>{count}-{finallyCount}</h4>
        {value}
        <div>
            <button onClick={() => setCount(count + 1)}>+c1</button>
            <input value={value} onChange={event => setValue(event.target.value)}/>
        </div>
    </div>;
}
复制代码

执行结果：此实例中finallyCount初始化时执行一次，后面点点击按钮setCount一次就执行一次，打印出code shu 但是在输入框输入值时setValue 改变value时，不会打印code shu

2. useCallback的使用场景：

useCallback缓存的是函数，当父组件需要通过props向子组件传递changeAge函数时，点击改变age按钮时，子组件调用changeAge方法传到父组件，父组件改变age的值，将该方法用useCallback（）包裹，缓存函数，只有当触发子组件改变age按钮时，才会调用此方法。因此当点击改变无关的数据name按钮时，changeAge函数不会执行

如果不用useCallback，每点击一次改变无关的数据name按钮，都会去执行一次父组件传到子组件中的方法

export default function TestCallback() {
  const [name, setName] = useState("code shu");
  const [age, setAge] = useState(24);
  const changeAge = useCallback(() => {
    setAge((age) => age + 1);
  }, []);
  console.log("TestCallback");
  return (
    <div>
      <div>name:{name}</div>
      <br />
      <button onClick={() => setName((name) => name + 5)}>
        改变无关的数据name
      </button>
      <br />
      <br />
      <Age age={age} changeAge={changeAge} />
    </div>
  );
}

const Age = memo(function Message({ age, changeAge }: any) {
  console.log("age");
  return (
    <div>
      <button onClick={changeAge}>改变age</button>
      <p>age:{age}</p>
    </div>
  );
});

复制代码

点击 改变age按钮

2.点击 改变无关的数据name按钮

若文中有误，望大佬指正