Skip to main content

useCallback

当把一个回调函数以依赖项数组作为参数传入 useCallback，它将返回一个缓存后的函数。

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

useMemo、useEffect 的执行时机对比​

useMemo 和 useCallback 都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行；并且这两个 hooks 都返回缓存的值，useMemo 返回缓存的变量，useCallback 返回缓存的函数。

useCallback 使用场景​

useCallback

useCallback 跟 useMemo 比较类似，但它返回的是缓存的函数。

hooks 组件 state 改变后会引起父组件的重新渲染，而每次重新渲染都会生成一个新函数，所以 react 子组件 props 在浅比较的时候就会认为 props 改变了，引起子组件不必要的渲染。

const Message = memo(function Message({ value, changeValue }) {
  console.log("Message");

  return (
    <div>
      <button onClick={changeValue}>改变有关数据</button>
      <p>与Message渲染有关的数据{value}</p>
    </div>
  );
});

function APP() {
  const [value, setValue] = useState(123);
  const [otherValue, setOtherValue] = useState(999);

  const changeValue = useCallback(() => {
    setValue((value) => value + 1);
  }, []);

  console.log("APP");

  return (
    <div>
      <div>与Message渲染无关的数据==={otherValue}</div>
      <br />
      <button onClick={() => setOtherValue((value) => (value -= 5))}>
        改变无关的数据
      </button>
      <br />
      <br />
      <Message value={value} changeValue={changeValue} />
    </div>
  );
}

参考​