React 中 PureComponent 使用注意事项与源码解析

React 中 PureComponent 与 Component 的区别：

PureComponent 继承于 Component，提供了一个基于 props 和 state 自动实现 shouldComponentUpdate() 方法的功能。具体来说， PureComponent 会在收到新的 props 或 state 时进行浅比较(shallow comparison)，如果它们与之前的值相等，则跳过该组件的渲染。这意味着， PureComponent 仅在 props 或 state 确实发生变化时才会重新渲染，这可以提高组件的性能，特别是对于那些经常接收 props 或 state 的组件。

需要注意的是， PureComponent 并非万能的，在某些情况下，它可能无法正确判断组件是否需要更新。例如，如果组件的状态是由某个异步操作更新的，或者组件的内部状态是由某个外部库管理的，则 PureComponent 可能无法检测到这些变化。

PureComponent 的使用注意事项：

• 仅在性能确实成为问题时才使用 PureComponent。不建议对每个组件都使用 PureComponent，因为过度使用 PureComponent 可能导致代码的可读性和可维护性下降。

• 确保组件的 props 和 state 是不可变的。如果组件的 props 或 state 是可变的，则 PureComponent 可能会产生意外的结果。

• 不要在 PureComponent 中使用生命周期方法 componentDidUpdate()。由于 PureComponent 仅在 props 或 state 发生变化时才重新渲染，因此 componentDidUpdate() 方法不会在 PureComponent 中被调用。

• 如果组件使用 PureComponent，则需要在组件的构造函数中显式地调用 super(props)。这将确保组件的构造函数被正确地执行。

PureComponent 源码解析：

import React, { Component } from 'react';

class PureComponent extends Component {
  isPureReactComponent = true;

  shouldComponentUpdate(nextProps, nextState) {
    return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
  }
}

function shallowEqual(objA, objB) {
  if (objA === objB) {
    return true;
  }

  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);

  if (keysA.length !== keysB.length) {
    return false;
  }

  for (let i = 0; i < keysA.length; i++) {
    const key = keysA[i];
    if (objA[key] !== objB[key]) {
      return false;
    }
  }

  return true;
}

export default PureComponent;

• shallowEqual 函数用于浅比较两个对象。它首先检查两个对象是否完全相等，如果是，则返回 true。否则，它比较两个对象的键的数量，如果它们不相等，则返回 false。然后，它遍历两个对象的键，并比较每个键对应的值。如果任何一个键对应的值不相等，则返回 false。否则，它返回 true。

• shouldComponentUpdate 方法是 PureComponent 的关键方法。它在组件收到新的 props 或 state 时被调用，并决定组件是否需要重新渲染。如果 shouldComponentUpdate 返回 true，则组件将重新渲染，否则将跳过渲染。

• PureComponent 在构造函数中调用 super(props)，确保组件的构造函数被正确地执行。

希望这篇文章对您有所帮助。如果你有任何其他问题，请随时与我联系。