面试题：React 中 useMemo 和 useCallback 在大型项目中的最佳实践与陷阱

Question

在一个具有大量用户交互和实时数据更新的大型 React 项目中，你负责优化性能。请讲述你在使用 useMemo 和 useCallback 时，总结出的最佳实践经验。同时，列举至少三个可能遇到的性能陷阱，并说明如何避免这些陷阱。

Answer 1

使用 useMemo 和 useCallback 的最佳实践经验

1. 仅对高成本计算使用 useMemo：
   • useMemo 用于缓存计算结果，避免在每次渲染时都进行重复计算。例如，如果有一个复杂的函数计算列表的总和，且列表数据没有变化时，使用 useMemo 缓存该计算结果。

   const largeList = [1, 2, 3, 4, 5];
   const sum = useMemo(() => {
     let total = 0;
     largeList.forEach(num => total += num);
     return total;
   }, [largeList]);
   

2. 对事件处理函数使用 useCallback：
   • 当传递给子组件的事件处理函数在父组件渲染时不会改变时，使用 useCallback 可以防止子组件不必要的重新渲染。比如一个按钮的点击处理函数传递给子组件。

   const handleClick = useCallback(() => {
     console.log('Button clicked');
   }, []);
   <ChildComponent onClick={handleClick} />
   

3. 合理设置依赖数组：
   • 依赖数组是 useMemo 和 useCallback 的关键。要准确传入依赖项，使得在依赖项变化时才重新计算或重新创建回调。如果依赖数组为空 []，则只有在组件挂载和卸载时会运行一次。如果依赖数组包含所有相关依赖，能确保在相关数据变化时进行更新。

可能遇到的性能陷阱及避免方法

1. 依赖数组设置不当：
   • 陷阱：如果依赖数组遗漏了实际会影响计算或回调逻辑的变量，可能导致缓存结果不正确或回调没有在需要时更新。例如，在计算一个基于用户输入和列表数据的结果时，遗漏了用户输入变量在依赖数组中。
   • 避免方法：仔细分析计算或回调逻辑中使用的所有外部变量，并将它们全部放入依赖数组。也可以使用 ESLint 插件如 eslint-plugin-react-hooks 来帮助检测遗漏依赖的情况。
2. 过度使用 useMemo 和 useCallback：
   • 陷阱：对简单的计算或回调也使用 useMemo 和 useCallback，不仅不会提升性能，反而会增加额外的开销。因为每次渲染时都需要检查依赖数组，这本身也有一定成本。
   • 避免方法：只对真正有性能瓶颈的高成本计算和可能导致子组件不必要重新渲染的回调使用。对于简单的函数和计算，让 React 自然渲染即可。
3. 在循环中使用 useMemo 和 useCallback：
   • 陷阱：在循环中使用它们可能导致大量不必要的缓存创建和依赖检查，因为每次循环迭代都会创建新的 memoized 值或 callback。
   • 避免方法：尽量将 useMemo 和 useCallback 放在循环外部，在必要时可以通过传入索引或其他唯一标识作为依赖，减少不必要的重新计算或创建。如果可能，重构代码以避免在循环内部使用这些钩子进行复杂逻辑。