react hooks学习之useMemo和useCallback

本文介绍: 用于缓存回调函数，以防止不必要的重新渲染。useMemo用于缓存计算结果，以避免不必要的重复计算。返回的是缓存的回调函数。useMemo 返回的是缓存的计算结果。的依赖项是回调函数内部的变量，它决定了何时需要重新创建回调函数。useMemo的依赖项是计算函数内部的变量，它决定了何时需要重新计算结果。使用主要关注于性能优化，特别是在将回调函数作为 prop 传递给子组件时。使用 useMemo主要关注于计算性能，特别是在计算开销较大的值时。

us eMemo和us eCallb ack的用法以及区别

useCallback 和 useMemo 是 React 中的两个钩子函数，它们的目标都是优化性能，但它们在用途和使用场景上有一些区别。

useCallbac k

useCallbac k 用于缓存一个回调函数，并在依赖项发生变化时，返回相同的回调函数引用。主要用于防止在每次渲染时都创建新的回调函数，尤其是当这个回调函数作为 prop 传递给子组件时，可以避免不必要的重新渲染。

const MyComponent = ({ onClick }) =&gt; {
  const handleClick = useCallback(() =&gt; {
    // 处理点击事件
  }, []); // 空依赖数组表示回调函数不依赖于任何变量

  return &lt;button onClick={handleClick}&gt;Click me</button&gt;;
};

useMemo

useMemo 用于缓存计算的结果，并在依赖项发生变化时，返回缓存的结果。主要用于避免在每次渲染时都重新计算某个值，特别是在渲染开销较大的计算结果时。

const MyComponent = ({ data }) =&gt; {
  const processedData = useMemo(() =&gt; {
    // 处理 data，返回一个新的值
    return processData(data);
  }, [data]); // 依赖于 data 变量

  return <div&gt;{processedData}</div&gt;;
};

区别 总结

用途不同：
- useCallback 用于缓存回调函数，以防止不必要的重新渲染。
- useMemo 用于缓存计算结果，以避免不必要的重复计算。
返回值不同：
- useCallback 返回的是缓存的回调函数。
- useMemo 返回的是缓存的计算结果。
依赖项处理不同：
- useCallback 的依赖项是回调函数内部的变量，它决定了何时需要重新创建回调函数。
- useMemo 的依赖项是计算函数内部的变量，它决定了何时需要重新计算结果。
适用场景不同：
- 使用 useCallback 主要关注于性能优化，特别是在将回调函数作为 pro p 传递给子组件时。
- 使用 useMemo 主要关注于计算性能，特别是在计算开销较大的值时。