剖析PureComponent和memo，透析React的优化技巧

2023-10-29 20:08:37

React优化：PureComponent和memo提升应用程序性能

在React应用程序开发中，性能是一个至关重要的考虑因素。当组件更新时，它及其所有子组件都会重新渲染，即使子组件没有发生任何更改，这种情况称为“不必要的渲染”。这会对应用程序的性能产生负面影响。为了解决这个问题，React提供了PureComponent和memo两个优化工具。

PureComponent

PureComponent是一个React内置的优化组件，它通过shouldComponentUpdate生命周期来控制子组件的渲染。当父组件更新时，PureComponent会自动比较当前props和上一次的props，如果它们相等，则不更新组件，否则才更新组件。这可以有效避免不必要的渲染，从而提高应用程序的性能。

代码示例：

class Counter extends PureComponent {
  render() {
    return <h1>{this.props.count}</h1>;
  }
}

在上述示例中，Counter组件只有在props.count发生变化时才会重新渲染。

memo

memo是React提供的另一个优化工具，它通过useMemo/useCallback Hook来优化子组件的渲染。useMemo Hook可以缓存一个函数的返回值，useCallback Hook可以缓存一个函数本身。当父组件更新时，memo会自动比较当前props和上一次的props，如果它们相等，则不重新执行useMemo/useCallback的函数，否则才重新执行这些函数。这也可以有效避免不必要的渲染，从而提高应用程序的性能。

代码示例：

const ExpensiveComputationMemo = memo(ExpensiveComputation);

在上述示例中，ExpensiveComputationMemo组件只有在computeResult()函数的返回值发生变化时才会重新渲染。

PureComponent和memo的比较

PureComponent和memo都是React提供的优化工具，它们都有助于避免不必要的渲染，从而提高应用程序的性能。然而，它们也有各自的优缺点。

PureComponent 只适用于受控组件，即组件的props是从父组件传递过来的。如果组件的props是通过state或其他方式更新的，那么PureComponent无法有效地优化渲染。
memo 适用于受控组件和非受控组件，即组件的props可以从父组件传递过来，也可以通过state或其他方式更新。memo的缺点是，它需要显式地指定哪些props需要被比较。

选择合适的优化工具

在实际使用中，我们可以根据组件的具体情况选择合适的优化工具。如果组件是受控组件，且props只有从父组件传递过来的情况，那么PureComponent是一个不错的选择。如果组件是非受控组件，或者props可以通过多种方式更新，那么memo更适合。

最佳实践

为了充分利用React的优化功能，建议遵循以下最佳实践：