13、React 开发中的数据处理与性能优化

React 开发中的数据处理与性能优化

1. React 组件性能优化相关

1.1 使用 memo 和 useCallback 避免重复渲染

在 React 中， memo 和 useCallback 可用于处理组件树中过多的重新渲染问题。例如：

const PureCat = memo(Cat);
function App() { 
  const meow = useCallback(name => console.log(`${name} has meowed`), []); 
  return <PureCat name="Biscuit" meow={meow} />
}

这里没有给 memo(Cat) 提供属性检查谓词，而是使用 useCallback 确保 meow 函数不会改变。

1.2 何时进行重构

useMemo 、 useCallback 和 memo 函数常被过度使用。React 本身设计为快速运行，组件大量渲染是其特性。性能优化应是最后一步，重构存在权衡：
- 过度使用的弊端 ：到处使用 useCallback 和 useMemo 可能使应用性能变差，增加