防止React重新呈现特定的子组件

Question

我有一个有条件地渲染几个子组件的react组件。 简化的代码就是：

render(): {
  const component1 = condition ? renderComponent2() : null;
  const component2 = renderComponent2();

  return (
    <div>
      {component1}
      {component2}
    </div>
  );
}

问题是，只要condition发生变化， component2就会被破坏并重新呈现。 我试图阻止它并保持原始元素。 我尝试在没有运气的情况下向component2添加key 。

[edit]即使在component1总是存在的情况下也会发生这种情况，并且我在其上更改标志以使用CSS隐藏它：/

Answer 1

形成示例代码，您的component2将不会被销毁并再次重新安装。 React将运行任何render和可能的其他生命周期方法，但React将更新 DOM中的组件。

也许你的代码更复杂。 这会导致您认为自己没有重新渲染component2 ，而是尝试渲染一个全新的组件。 但同样，从您的示例代码中可以看出这一点并不清楚。

您可以在此处找到概念证书代码库 ，其中包含以下内容：

• 它呈现了2个具有绿色背景的component2实例。
• 按钮可以（ 非法 ）将第一个组件的背景颜色更改为红色，而不是反应的知识。
• 通过单击按钮，react将重新呈现2个组件。
• 背景颜色保持红色，这证明反应只更新组件，并且不会破坏。

React不会将背景颜色重置为绿色，因为react认为（来自其虚拟DOM）背景颜色未更改且仍为绿色。

更新：codepen现在还包含有关它如何发生的进一步证明：

• 如果更改返回的HTML类型（从概念证明中的<p>元素到<h1>元素）
• react将不会将其识别为相同的元素，并销毁原始元素并插入新元素。

PS：因为您的示例代码通过方法调用创建组件，所以不应该应用任何生命周期方法（例如shouldComponentUpdate ）。 通过方法渲染组件只应针对简单组件，即反应元素。 请参阅此处的官方文档 ：

ReactElement是DOM元素的轻量级， 无状态 ，不可变的虚拟表示。

Answer 2

您是否尝试过使用shouldComponentUpdate ？ 这正是应该使用此功能的原因。 只需将其添加到您的component2并在其中添加适当的条件。

Answer 3

如果condition状态发生变化，组件将自行重新渲染，这意味着component2也将被更改。