ReactJS - 防止重新渲染孩子答案

【问题标题】：ReactJS - prevent re-render childrenReactJS - 防止重新渲染孩子
【发布时间】：2016-07-26 01:10:23
【问题描述】：

我的父 React 组件有 3 个孩子，像这样：

var Parent = React.createClass({
   render: function() {
     return (<div>
         <C1/>
         <C2/>
         <C3/>
       </div>)
   }
})

我正在尝试能够根据当前父状态更改孩子的位置。所以在不同的情况下我需要返回 C1,C3,C2 或 C3,C2,C1 等。 但我想这样做而不重新渲染孩子。 我正在尝试在每个孩子上使用 shouldComponentUpdate ，但它会被调用以用于未更改其在父渲染方法中的位置的组件。因此，如果最初返回 C1, C2, C3 然后 C2, C1, C3 然后 shouldComponentUpdate 被调用 C3 但是不适用于 C1 或 C2 所以在这种情况下，我可以在 C3 内返回 false 并防止重新渲染，但我不明白为什么不为这样做的孩子调用 shouldComponentUpdate改变他们的立场。

有什么建议吗？谢谢。

【问题讨论】：

你们是如何实现shouldComponentUpdate的？请记住，shouldComponentUpdate 是一个应该告诉 React 何时更新的函数，而不仅仅是返回 true 或 false。
我还没有实现它，因为首先我尝试至少在每次父级重新渲染子级时调用 shouldComponent。
让我们退后一步，重新评估您的方法。这些孩子都是同一个组件类的实例吗？如果是这样，您是否只需要向它们传递不同的道具，使它们有效地交换位置？
@ValeriuMazare：如果你没有实现它，那么你怎么能指望shouldComponentUpdate 被调用呢？ :) 我只是要求您分配给shouldComponentUpdate 的功能。
@ValeriuMazare - 当然，但这不是我要问的。我想知道它们是否都是同一类的实例。例如，如果您的父组件是<TodoList/>，那么每个子组件都是<Todo/>。是这样吗？

标签： javascript reactjs

【解决方案1】：

看看https://reactjs.org/docs/fragments.html#keyed-fragments。
键控片段旨在解决这些问题；）

【讨论】：