React useCallback用法

useCallback 是 React 中的一个 Hook，它用于优化性能，通过缓存函数的引用来避免在组件的每次渲染时都创建新的函数实例。这对于避免不必要的子组件重新渲染特别有用，因为如果传递给子组件的回调函数在每次渲染时都不同，即使子组件自身没有状态变化，也会导致它们重新渲染。

基本用法

import React, { useCallback } from 'react';

function ParentComponent({ someDependency }) {
  // 使用 useCallback 缓存函数，只有当 someDependency 变化时才会重新生成该函数
  const memoizedCallback = useCallback(
    () => {
      // 回调函数的实现
      console.log('Callback triggered');
    },
    [someDependency] // 依赖数组，当这些值变化时，useCallback 会重新计算并返回一个新的回调函数
  );

  return (
    <ChildComponent onClick={memoizedCallback} />
  );
}

关键点

• 缓存函数: useCallback 会记住提供的函数，并在依赖项数组（第二个参数）中的值没有变化时，返回同一个函数引用。
• 依赖项数组: 类似于 useEffect，你需要提供一个依赖项数组来告诉 React 何时应该重新计算回调函数。如果省略此数组或传递空数组，则函数只会被创建一次。
• 避免不必要的渲染: 当子组件使用 React.memo 或通过 shouldComponentUpdate 优化时，稳定的回调函数引用可以防止它们因接收新引用而重新渲染。
• 性能考量: 虽然 useCallback 可以提升性能，但如果过度使用或不当地使用（例如，对于没有性能瓶颈的小型组件或无需缓存的函数），可能会引入额外的管理开销。

最佳实践

• 仅在必要时使用: 只有当传递给子组件的回调函数引起不必要的子组件渲染时，才考虑使用 useCallback。
• 合理设置依赖项: 确保依赖项数组只包含那些实际影响回调行为的变量，避免遗漏或添加过多的依赖项。
• 结合 React.memo 使用: 在接收回调函数的子组件中使用 React.memo 可以进一步优化，确保子组件仅在 props 实质性变化时才重新渲染。