Javascript 渲染方法中的对象创建是否中断'；React.PureComponent'；和渲染签入'；是否应该更新组件'；？

tl；dr：当您在渲染方法中创建对象/组件以作为道具/子对象传递给渲染组件时，是否在shouldComponentUpdate中检查React.PureComponent和prop checks失败

我经常看到类似的模式：

  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>
    )
  }

render（）{
const commentTrigger=注释；
constDeleteTrigger=删除线程；
常量someComponentProps={
prop1:this.getProp1（）
prop2:this.props.prop2
}
返回(
PureComponent将对其道具进行简单的比较，基本上是使用比较。对于对象，这意味着只有当它是相同的对象时，它才会通过，而不是当它是具有所有相同属性的不同对象时

因此，您的前两个示例（commentTrigger和deleteTrigger）将遇到这种情况。每次渲染时，它们都是全新的对象，与前面的对象无关，因此不会传递三重相等

在第三个示例（扩展someComponentProps）中，someComponentProps是否是新对象没有区别。通过扩展它，您传递的是一系列单独的props，从
prop1={someComponentProps.prop1}开始
并运行对象上的其余属性。当您不知道有多少道具时，这是一种方便的语法。如果某个组件是纯组件，它将检查prop1是否更改以及prop2是否更改，而不知道某些组件道具是否存在。
PureComponent将对其属性进行粗略比较道具，基本上使用比较。对于对象，这意味着只有当它是相同的对象时，它才会通过，而不是当它是具有所有相同属性的不同对象时

因此，您的前两个示例（commentTrigger和deleteTrigger）将遇到这种情况。每次渲染时，它们都是全新的对象，与前面的对象无关，因此不会传递三重相等

在第三个示例（扩展someComponentProps）中，someComponentProps是否是新对象没有区别。通过扩展它，您传递的是一系列单独的props，从
prop1={someComponentProps.prop1}开始
并运行对象上的其余属性。当您不知道有多少道具时，这是一种方便的语法。如果某个组件是纯组件，它将检查prop1是否更改，prop2是否更改，而不知道某些组件道具是否存在。
PureComponent

是否执行c检查道具对象。如果下一个

prop1

值（使用

this.getProp1（）

创建）等于上一个值，那么

prop2

也等于上一个值，

SomeComponent

将不会更新

---

即使道具不是

==

相等，也可以在

shouldComponentUpdate

中执行自定义检查，例如深度相等性检查。

PureComponent

对道具对象进行浅层相等性检查。如果下一步

prop1

值（使用

this.getProp1（）

创建）如果

==

等于上一个值，则

prop2

也等于上一个值，

SomeComponent

将不会更新

---

即使道具不等于

==

，也可以在

shouldComponentUpdate

中执行自定义检查，例如深度相等性检查。

感谢您的帮助，这更有意义。对于前两个示例，是否最好创建单独的功能组件并直接将其作为道具插入，以便它们始终是道具ame？有几个选项可供您选择。我不知道该推荐什么，因为我不知道道具将用于什么。是的，一个选项是让SomeModal期望您传递组件。但是您可能需要更多的控制，在这种情况下，您可以考虑使用渲染道具）。然后将一个函数传递给SomeModal，并使该函数成为主组件上的一个方法（即，它不是在render中创建的）。第三种选择是编写一个自定义的shouldComponentUpdate，它会忽略触发器道具，因此，如果您更改它，这并不重要。感谢您的帮助，这会更有意义。对于前两个示例，是否最好创建单独的功能组件并直接将其作为道具插入，以便它们始终保持不变？有一些操作选项由您决定。我不知道该推荐什么，因为我不知道该道具将用于什么。是的，一个选项是让SomeModal期望您传递组件。但是您可能需要更多的控制，在这种情况下，您可以考虑执行渲染道具）。然后将函数传递给SomeModal，然后您就可以使用该函数了主组件上的一个方法（即，它不是在render中创建的）。第三个选项是编写一个自定义shouldComponentUpdate，该方法忽略触发器属性，因此更改它并不重要。