React.PureComponent没有实现shouldComponentUpdate

Question

我可能会遗漏一些东西，但我有一个像这样的组件

export default MyComponent extends React.PureComponent {
    // ...
}

当MyComponent是另一个组件渲染方法的一部分时，每次父渲染时MyComponent都会重新渲染，即使props / state不变。因此，似乎从React.Component更改为React.PureComponent并未使组件“纯粹”。

我尝试添加

console.info(this.shouldComponentUpdate)

在其中一个组件方法中，它表示未定义。是不是React.PureComponent应该添加浅层比较shouldComponentUpdate方法？

现在发生了React 15.5.4 和 15.6.0

Answer 1

PureComponent不直接声明The last argument `rhel7` is the image name that are gonna generate. 。您无法使用shouldComponentUpdate访问它。在React源代码中有一个this.shouldComponentUpdate变量：

（简化了以下源代码）

shouldUpdate

由于它只是浅层相等，因此下面的代码返回false并重新呈现：

// default is true
var shouldUpdate = true;

if (inst.shouldComponentUpdate) {
  shouldUpdate = inst.shouldComponentUpdate(
    nextProps,
    nextState,
    nextContext,
  );
} else {
  // if it's a PureComponent
  if (this._compositeType === ReactCompositeComponentTypes.PureClass) {
    shouldUpdate =
      !shallowEqual(prevProps, nextProps) ||
      !shallowEqual(inst.state, nextState);
  }
}

// ...

if (shouldUpdate) {
  // re-render ..
}

因此请仔细使用对象和数组。要证明PureComponent有效，请参阅此示例（v15.6）：https://codepen.io/CodinCat/pen/eRdzXM?editors=1010

点击该按钮不会触发const propA = { foo: 'bar' } const nextPropA = { foo: 'bar' } shallowEqual(propA, nextPropA) // false 的渲染：

以下是PureComponent可能不适合您的另一个示例：https://codepen.io/CodinCat/pen/QgKKLg?editors=1010

唯一的区别是Foo

因为<Foo someProp={{ foo: 'bar' }} />，React每次都会重新渲染。因此，直接在道具中编写内联对象和数组并不是一个好习惯。一个常见的错误是编写内联样式：

{ foo: 'bar' } !== { foo: 'bar' }

在这种情况下，<Foo style={{ color: 'pink' }} /> 将始终重新渲染，即使它是PureComponent。如果您遇到此问题，您可以简单地在某处提取并存储对象，例如：

Foo

从const someProp = { foo: 'bar' } <Foo someProp={someProp} /> 开始，PureComponent工作。