无需使用useMemo也能优化React组件

2023-09-08 20:33:39

在 React 组件中，我们经常使用 useMemo 或 memo 来优化组件性能。本质上，是为了避免组件不必要地重复渲染。这里分享两种不同的技巧，也能够达到避免重复渲染的效果。

技巧一：使用 `React.PureComponent`

React.PureComponent 是一个内置的组件基类，它实现了 shouldComponentUpdate 生命周期方法，并且默认情况下，该方法会比较 props 和 state，如果它们相等，则组件不会重新渲染。

要使用 React.PureComponent，只需要将你的组件扩展自 React.PureComponent 即可。例如：

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

技巧二：使用 `Object.is` 来比较对象

Object.is 是一个内置的方法，它可以比较两个值是否相等，包括 null、undefined、NaN 等特殊值。

我们可以使用 Object.is 来比较 props 和 state，如果它们相等，则组件不会重新渲染。例如：

class MyComponent extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    return !Object.is(this.props, nextProps) || !Object.is(this.state, nextState);
  }

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.content}</p>
      </div>
    );
  }
}

比较这两种技巧

React.PureComponent 和 Object.is 都可以用来避免组件不必要地重复渲染，但它们有一些不同的特点。

React.PureComponent 只会比较 props 和 state，而 Object.is 可以比较任何值。
React.PureComponent 的比较是浅比较，而 Object.is 是深比较。这意味着 React.PureComponent 只会比较对象是否相等，而 Object.is 会比较对象中的每个属性是否相等。
React.PureComponent 是一种更简单的解决方案，但它可能不是在所有情况下都适用。例如，如果你需要比较两个复杂的对象，那么 Object.is 可能是一个更好的选择。