提问者:小点点

渲染方法中的对象创建是否中断“反应”。“PureComponent”和“shouldComponentUpdate”中的渲染检查?


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组件吗?提前感谢您的帮助。让我知道我是否应该重新措辞问题或澄清任何事情。


共2个答案

匿名用户

PureComponent将对其道具进行浅层比较,基本上使用Object.is()比较。对于对象,这意味着只有当它是相同的对象时,它才会传递,而不是当它是具有所有相同属性的不同对象时。

因此,您的前两个示例(commentTrigger和deleteTrigger)将遇到这个问题。每次渲染时,它们都是全新的对象,与以前的对象无关,因此不会传递三重相等。

在您的第三个例子(传播某些ComponentProps)中,某些ComponentProps是否是新对象没有区别。通过传播它,您传递了一系列单独的prop,从prop1={某些ComponentProps.prop1}开始,然后运行对象上的其余属性。当你不知道有多少道具时,这是一种方便的语法。如果某个组件是一个纯粹的组件,它将检查prop1是否改变,prop2是否改变,而不知道某些组件甚至存在。

匿名用户

PureComponent对道具对象进行浅层相等性检查。如果下一个prop1值(使用this.getProp1()创建)等于上一个值,那么prop2也等于上一个值,SomeComponent将不会被更新。

即使道具不相等,也可以在shouldComponentUpdate中执行自定义检查,例如深度相等检查。