摆脱非必要的 React 渲染：优化性能的秘诀

前端

2023-09-12 02:53:12

在 React 生态系统中，性能是一个至关重要的因素。非必要的渲染会导致不必要的性能开销，最终影响用户的体验。本文将深入探讨导致非必要的组件渲染的常见情况，并提供可行的解决方案，帮助你优化 React 应用的性能。

非必要渲染的罪魁祸首

以下是一些可能触发非必要渲染的常见场景：

状态更新： 每当组件状态更新时，React 都会重新渲染组件，即使更新后的状态与之前的状态相同。
父组件重新渲染： 如果父组件重新渲染，即使子组件的状态没有改变，子组件也会重新渲染。
使用不稳定的引用： 如果组件使用不稳定的引用，例如 this.state 或 this.props，每次渲染时都会创建新的引用，这将触发额外的重新渲染。
不受控组件： 当使用不受控组件（由 DOM 管理状态）时，每次用户输入都会触发组件的重新渲染。

应对之道：避免非必要的渲染

为了避免非必要的渲染，可以采取以下策略：

比较状态变化： 仅在状态发生变化时才重新渲染组件。可以使用 shouldComponentUpdate 生命周期方法或 useMemo 钩子进行状态比较。
使用 React.memo()： 这是一个更高阶的组件，它可以根据 props 变化决定是否重新渲染组件。
防止不必要的子组件更新： 使用 PureComponent 或 shouldComponentUpdate 生命周期方法，仅在 props 或状态发生变化时才更新子组件。
控制不受控组件： 通过使用受控组件（由 React 管理状态）来避免不必要的重新渲染。
使用 useMemo 和 useCallback： 这些钩子允许你缓存组件中计算昂贵的函数或值，从而减少不必要的重新渲染。

示例：使用 useMemo 进行状态比较

以下是使用 useMemo 钩子比较组件状态的示例：

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const memoizedValue = useMemo(() => {
    return count % 2 === 0;
  }, [count]);

  if (memoizedValue) {
    // 仅在 count 为偶数时才重新渲染
    return <h1>计数为偶数</h1>;
  } else {
    // 仅在 count 为奇数时才重新渲染
    return <h1>计数为奇数</h1>;
  }
};