Javascript 传递对象时防止在PureComponent上重新渲染

使用时，与功能组件相比，您有一个优势，即当父组件更新时，不会始终呈现该组件。它实际上仅在组件道具发生更改时渲染，在本例中，仅当您更改输入时才渲染

如何将对象传递给PureComponent而不破坏使用此类组件的所有优势？

这是否意味着，一旦你有了一个你认为是object类型的道具，最好是让你的组件正常工作？

我加了一个例子来说明我的意思。。。（可能您需要在新窗口中打开它，因为有许多不同的子对象）

类TestPureComponent扩展了React.PureComponent{ render（）{ 返回{this.props.text}:{this.props.inputValue}{Math.random（）}{this.props.dismissClicked（）}>单击我 } } 函数测试FunctionalComponent（）{ 返回我始终更新，因为我是函数组件{Math.random（）} } const hell=（）=>{console.log（'Logs hello'）} 类RenderExample扩展了React.Component{ 建造师（道具）{ 超级（道具） this.state={单击：false，inputValue:'inputValue'} this.onClick=this.onClick.bind（this） this.doSomething=this.doSomething.bind（this） } onClick（）{ this.setState（{单击：！this.state.clicked}） } 剂量测定法（）{ console.log（'helllllo'） } heee=（）=>{ console.log（'heeee'） } 渲染（）{ 返回 更新状态（强制重新呈现）{this.state.clicked&&“clicked”} this.setState（{inputValue:e.target.value}）type=“text”value={this.state.inputValue}/>


hell}inputValue={this.state.inputValue}text=“如果单击按钮，将重新渲染；如果更改输入，将重新渲染”/>





现在，我们将向每个组件添加一个内联对象，现在它们都会更新 hell}inlineOBJ={{hello:'world'}inputValue={this.state.inputValue}text=“如果单击按钮，这将重新渲染，如果更改输入，这将重新渲染”/>



} } ReactDOM.render（，document.getElementById（'root'））

---

您必须将该对象存储在某个位置，以便它不会在每次重新渲染时生成。这也适用于在渲染期间生成的函数（dismissClicked={（）=>hell}）

如果渲染函数处于外部，则函数应位于外部，以便不会为每个渲染创建函数，如下所示： dismissClicked={this.hell}

对于对象，只需将其保存在状态

您可以使用功能组件实现完全相同的功能。使用“备注”包装组件以启用浅层比较

要防止在每次渲染时生成函数，请使用useCallback和useState保存要传递给子对象的对象，以便引用保持不变

您可以使用useEffect轻松更新这些对象

---

希望这有帮助。愉快的编码。

“当使用PureComponents时，与功能组件相比，您有一个优势，即当父组件更新时，该组件并不总是呈现出来。”它不是这样工作的。PureComponent和Component的区别在于，第一个组件没有

shouldComponentUpdate

方法，而是在引擎盖下实现它，并进行简单的比较。我不完全理解您试图实现的目标。try

const TestFunctionalComponent=React.memo（function（）{…）

您将看到它永远不会更新。功能组件可以与so props never change引用一起使用，即使您传递函数/对象，值也不会改变。如果您的prop是计算对象，我建议使用容器和React.memo。@AndrzejZiółek我想要的是拥有一个PureComponent，当有一个对象作为道具传入（我将尝试重新表述该问题）因此，不要在

渲染中内联构造对象

——这样每次都会有不同的引用。正如skyboyer所建议的，不要在渲染中构造对象。如果必须计算或合并值来创建道具，请使用容器和

React.memo

。如果渲染像

onDelete这样的道具，则需要一个容器={createDelete（id）}

或

onDelete={（）=>anything}

或

item={{……dataItem，……editItem}}

或

item={……item，update}

查找或了解如何编写容器。