我知道shouldComponentUpdatePureComponent的功能。但是我想知道是否可以将两者一起使用?

说我有很多 Prop ,我想让它们在PureComponent中进行浅比较。除了1个 Prop 外,还需要比较巧妙地进行比较。那么可以使用shouldComponentUpdate吗? React将考虑哪个结果?

换句话说,React会调用PureComponent的浅表比较,然后再调用我的shouldComponentUpdate吗?还是我的shouldComponentUpdate会覆盖原始的?

如果它的两层结构很好,如果PureComponent返回false,则该控件进入我的shouldComponentUpdate中,在那里我还有另一个机会使用return false

最佳答案

首先,您将在开发环境中得到警告,因为React source code检查在处理PureComponent时是否定义了该方法:

if (
  isPureComponent(Component) &&
  typeof inst.shouldComponentUpdate !== 'undefined'
) {
  warning(
    false,
    '%s has a method called shouldComponentUpdate(). ' +
      'shouldComponentUpdate should not be used when extending React.PureComponent. ' +
      'Please extend React.Component if shouldComponentUpdate is used.',
    this.getName() || 'A pure component',
  );
}

然后,在渲染时,如果定义了此方法,则实际上为skip
甚至不检查组件是否为PureComponent并使用您自己的实现。
if (inst.shouldComponentUpdate) {
  if (__DEV__) {
    shouldUpdate = measureLifeCyclePerf(
      () => inst.shouldComponentUpdate(nextProps, nextState, nextContext),
      this._debugID,
      'shouldComponentUpdate',
    );
  } else {
    shouldUpdate = inst.shouldComponentUpdate(
      nextProps,
      nextState,
      nextContext,
    );
  }
} else {
  if (this._compositeType === ReactCompositeComponentTypes.PureClass) {
    shouldUpdate =
      !shallowEqual(prevProps, nextProps) ||
      !shallowEqual(inst.state, nextState);
  }
}

因此,通过在shouldComponentUpdate上实现自己的PureComponent,您将失去较浅的比较。

09-15 19:24