ReactJS - 防止重新渲染子组件

Question

我有一个父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。

有什么建议吗？谢谢。

- Valeriu Mazare

---

你是如何实现 shouldComponentUpdate 的呢？请记住，shouldComponentUpdate 是一个函数，它应该告诉React 何时 更新，而不仅仅是返回 true 或 false。 - Akshat Mahajan

我还没有实现它，因为首先我至少要尝试在每次父组件重新渲染子组件时调用shouldComponent。 - Valeriu Mazare

让我们退一步，重新评估您的方法。这些孩子是否都是相同组件类的实例？如果是，那么您只需要向它们传递不同的 props，导致它们有效地交换位置。 - Michael Parker

@MichaelParker，不，它们是不同的实例。我像这样声明它们： var C1 = React.createClass.... var C2 = React.createClass........ - Valeriu Mazare

@ValeriuMazare - 当然可以，但那不是我想问的。我想知道它们是否都是同一个类的实例。例如，如果您的父组件是<TodoList/>，那么每个子组件都将是<Todo/>。这是这种情况吗？ - Michael Parker

Answer 1

请看https://reactjs.org/docs/fragments.html#keyed-fragments。
键控片段的设计旨在解决这些问题 ;)

- yachaka