reactjs - 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 不声明 shouldComponentUpdate直接地。您无法使用 this.shouldComponentUpdate 访问它。在React源代码中有一个shouldUpdate变量:

(下面的源码经过简化)

// 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 ..
}

由于它只是浅等于，因此下面的代码返回 false 并且您会重新渲染:

const propA = { foo: 'bar' }
const nextPropA = { foo: 'bar' }

shallowEqual(propA, nextPropA) // false

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

点击按钮不会触发 Foo的渲染:

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

唯一的区别是<Foo someProp={{ foo: 'bar' }} />

因为{ foo: 'bar' } !== { foo: 'bar' } ，React 每次都会重新渲染。因此直接在 props 中编写内联对象和数组并不是一个好的做法。一个常见的错误是编写内联样式:

<Foo style={{ color: 'pink' }} />

在本例中Foo即使它是 PureComponent，也总是会重新渲染。如果您遇到此问题，您可以简单地提取对象并将其存储在某处，例如:

const someProp = { foo: 'bar' }

<Foo someProp={someProp} />

自 someProp === someProp ，PureComponent 就可以工作了。