react如何避免子组件无谓的渲染

使用 React.memo 进行浅比较

React.memo 是一个高阶组件，用于对函数组件进行浅比较。只有当 props 发生变化时，才会重新渲染组件。适用于 props 为基本类型或引用稳定的对象。

const MyComponent = React.memo(function MyComponent(props) {
  /* 使用 props 渲染 */
});

使用 useMemo 缓存计算结果

当子组件的渲染依赖于某个复杂计算时，使用 useMemo 可以避免每次渲染都重新计算。只有当依赖项变化时才会重新计算。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

使用 useCallback 缓存回调函数

父组件传递给子组件的回调函数如果每次都重新创建，会导致子组件不必要的渲染。使用 useCallback 可以缓存函数引用。

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

合理设计组件结构

将频繁变化的部分与稳定部分分离成不同组件。通过组件组合的方式，让变化的部分不影响不需要更新的部分。

避免在渲染中使用内联对象和函数

内联创建的对象和函数每次都会生成新的引用，导致子组件认为 props 发生了变化。应该将这些值提升到组件外部或使用 useMemo/useCallback。

使用 shouldComponentUpdate 生命周期方法

对于类组件，可以通过实现 shouldComponentUpdate 方法来自定义比较逻辑，决定是否需要重新渲染。

shouldComponentUpdate(nextProps, nextState) {
  // 自定义比较逻辑
  return this.props.value !== nextProps.value;
}

使用不可变数据

使用不可变数据可以更容易地比较数据是否发生变化。通过 immer 等库可以方便地处理不可变数据。

使用 Context API 时的注意事项

当使用 Context 时，避免将频繁变化的值放在 Context 中，或者将 Context 拆分为多个更细粒度的 Context。

使用 React DevTools 分析性能

使用 React DevTools 的 Profiler 功能可以分析组件渲染情况，找出不必要的渲染并进行优化。