我知道shouldComponentUpdate
和PureComponent
的功能。但是我想知道是否可以将两者一起使用?
说我有很多 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
,您将失去较浅的比较。