tl;dr:当您在render方法中创建对象/组件以作为道具/子对象传递给渲染组件时,React的检查是否失败。PureComponent和prop检查是否应该更新?
我经常看到类似的模式:
render() {
const commentTrigger = <Button>Comment</Button>;
const deleteTrigger = <Button>Delete Thread</Button>;
const someComponentProps = {
prop1: this.getProp1()
prop2: this.props.prop2
}
return (
<div>
<SomeModal trigger={commentTrigger} />
<SomeOtherModal trigger={deleteTrigger} />
<SomeComponent {...someComponentProps}
</div>
)
}
这是否会使整个过程失败。PureComponent检查或shouldComponentUpdate检查在SomeComponent中,因为someComponentProps每次都是一个不同的对象,特别是(假设这个.getProp1()是一个新创建的对象)prop1本身是否会导致这些测试失败并最终重新呈现组件?如果这个怎么样。getProp1()只是一个数字?
否则,有什么好的理由不以这种方式编写React组件吗?提前感谢您的帮助。让我知道我是否应该重新措辞问题或澄清任何事情。
PureComponent将对其道具进行浅层比较,基本上使用Object.is()比较。对于对象,这意味着只有当它是相同的对象时,它才会传递,而不是当它是具有所有相同属性的不同对象时。
因此,您的前两个示例(commentTrigger和deleteTrigger)将遇到这个问题。每次渲染时,它们都是全新的对象,与以前的对象无关,因此不会传递三重相等。
在您的第三个例子(传播某些ComponentProps)中,某些ComponentProps是否是新对象没有区别。通过传播它,您传递了一系列单独的prop,从prop1={某些ComponentProps.prop1}
开始,然后运行对象上的其余属性。当你不知道有多少道具时,这是一种方便的语法。如果某个组件是一个纯粹的组件,它将检查prop1是否改变,prop2是否改变,而不知道某些组件甚至存在。
PureComponent
对道具对象进行浅层相等性检查。如果下一个prop1
值(使用this.getProp1()
创建)等于上一个值,那么prop2
也等于上一个值,SomeComponent
将不会被更新。
即使道具不相等,也可以在shouldComponentUpdate
中执行自定义检查,例如深度相等检查。