React 性能优化：从 PureComponent 到 React.memo

PureComponent 是 React 中的一个类组件，它通过浅比较（shallow comparison）来优化组件的渲染性能。PureComponent 会自动实现 shouldComponentUpdate 方法，对 props 和 state 进行浅比较，如果没有变化，则阻止组件重新渲染。

使用 PureComponent

要使用 PureComponent，只需将你的类组件继承自 React.PureComponent，而不是 React.Component。

import React from 'react';

class MyComponent extends React.PureComponent {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
      </div>
    );
  }
}

浅比较

PureComponent 的浅比较意味着它只会比较 props 和 state 的第一层属性。如果 props 或 state 是复杂对象或数组，浅比较可能无法检测到深层的变化。

例如：

class MyComponent extends React.PureComponent {
  state = {
    items: [1, 2, 3]
  };

  handleClick = () => {
    const { items } = this.state;
    items.push(4); // 直接修改数组
    this.setState({ items }); // 不会触发重新渲染，因为浅比较认为 items 没有变化
  };

  render() {
    return (
      <div>
        <ul>
          {this.state.items.map(item => (
            <li key={item}>{item}</li>
          ))}
        </ul>
        <button onClick={this.handleClick}>Add Item</button>
      </div>
    );
  }
}

在这个例子中，点击按钮后，items 数组被修改，但由于 PureComponent 只进行浅比较，它不会检测到数组的变化，因此组件不会重新渲染。

何时使用 PureComponent

• 当组件的 props 和 state 是简单类型或不可变对象时：PureComponent 可以有效地减少不必要的渲染。
• 当组件的渲染成本较高时：如果组件的渲染操作非常耗时，使用 PureComponent 可以显著提升性能。

注意事项

• 避免直接修改 props 或 state：由于 PureComponent 只进行浅比较，直接修改对象或数组不会触发重新渲染。应该始终返回新的对象或数组。
• 复杂数据结构：如果 props 或 state 包含复杂的数据结构（如嵌套对象或数组），PureComponent 可能无法正确检测变化，此时可以考虑使用 React.memo 或手动实现 shouldComponentUpdate。

React.memo 与 PureComponent

React.memo 是函数组件的类似优化工具。它会对组件的 props 进行浅比较，类似于 PureComponent。

const MyComponent = React.memo(function MyComponent(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
});

React.memo 适用于函数组件，而 PureComponent 适用于类组件。

总结

PureComponent 是 React 提供的一个性能优化工具，适用于类组件。它通过浅比较 props 和 state 来减少不必要的渲染。然而，对于复杂的数据结构，PureComponent 可能无法正确检测变化，因此在使用时需要注意数据的不可变性。