反应我必须重新渲染父母才能重新渲染孩子吗?

Posted

技术标签:

【中文标题】反应我必须重新渲染父母才能重新渲染孩子吗?【英文标题】:React do I have to rerender parent in order to rerender children? 【发布时间】:2017-08-28 01:18:47 【问题描述】:

我有一个包含项目列表的表格组件。 通过更改列表中的项目,我看到整个表都在重新渲染。 我尝试放置 shouldComponentUpdate,通过返回 false 我看到 Row 组件没有重新渲染。 我是否必须重新渲染父组件才能重新渲染子组件?

【问题讨论】:

在 UI 中重新渲染与调用的渲染方法不同。哪个是给父母的?它可能是“渲染”,但如果没有差异,则实际上不会进行 DOM 更改。 子组件会受到父组件传递的数据的影响。好奇的。为什么必须阻止父组件的重新渲染? 【参考方案1】:

https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

返回 false 不会阻止子组件在其状态更改时重新渲染。

如果子项中的数据作为属性从父项传递,那么是的,您必须重新渲染父项才能重新呈现子项。这样做的原因是,如果您的孩子依赖于道具,并且父母不渲染,那么这些道具永远不会为孩子改变,因为它只会在父母渲染时收到更改的道具并根据自己的状态给它新的道具或道具。我怀疑这是你的问题。在 React 中,重新渲染父级通常不是性能问题。

如果孩子有自己的状态正在改变,那么不重新渲染父母就可以了。如果您使用状态容器,另一种选择是 connect 直接将子项发送到状态,然后在状态容器更新相关状态时更新他们的道具,但这有点超出了这个问题的范围。

一般来说,除非性能需要,否则最好不要使用shouldComponentUpdate,然后只有非常仔细地考虑。

【讨论】:

以上是关于反应我必须重新渲染父母才能重新渲染孩子吗?的主要内容,如果未能解决你的问题,请参考以下文章

反应父母对孩子道具传递而不重新渲染

反应父组件不重新渲染

反应只重新渲染一个孩子

反应上下文重新渲染提供者的每个孩子?

如何正确检测 React JS 中的重新渲染?

React 功能组件在重新挂载后停止渲染状态更改