防止 React 重新渲染特定的子组件答案

【问题标题】：Prevent React from re-rendering a specific child component防止 React 重新渲染特定的子组件
【发布时间】：2016-05-27 00:51:21
【问题描述】：

我有一个反应组件，它有条件地呈现几个子组件。简化的代码就是：

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

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

问题是component2 在condition 更改时被销毁并重新渲染。我试图阻止这种情况并保留原始元素。我尝试将key 添加到component2，但没有成功。

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

【问题讨论】：

不应该这样。请显示复制此内容的完整代码。
我不能，这是一段真正集成的代码。想知道是否有人对它可能发生的原因有任何建议？
你为什么要保留渲染的组件？您可以保留所有道具，以便在重新渲染时保持相同。
我的建议是将子组件保留为状态的一部分。它可能不是最优雅的，但它会起作用。
@EzraChang 我不认为这是正确的。首先应该没有问题，你绝对不应该将组件放入状态。

标签： javascript reactjs

【解决方案1】：

您是否尝试过使用shouldComponentUpdate？这正是该函数应该用于的用途。只需将其添加到您的 component2 并在其中添加适当的条件。

【讨论】：

【解决方案2】：

在示例代码中，您的component2 不会被破坏并重新挂载。 React 将运行任何 render 和可能的其他生命周期方法，但是 React 将更新 DOM 中的组件。

也许您的代码更复杂。这导致反应认为您没有重新渲染component2，而是尝试渲染一个全新的组件。但同样，从您的示例代码中这并不清楚。

您可以找到proof of concept codepen here，它执行以下操作：

它呈现component2 的2 个实例，背景为绿色。
按钮可以（非法）将第一个组件的背景颜色更改为红色，这超出了 react 的知识范围。
点击按钮，react 会重新渲染这两个组件。
背景颜色保持红色，这证明 react 只更新组件，不会破坏。

React 不会将背景颜色重置为绿色，因为 react 认为（从它的虚拟 DOM）背景颜色没有改变并且仍然是绿色。

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

如果您更改返回的 HTML 类型（在概念验证中从 <p> 元素更改为 <h1> 元素）
react 不会将其识别为同一个元素，并会破坏原始元素并插入新元素。

PS：因为您的示例代码通过方法调用创建组件，所以不应应用任何生命周期方法（例如shouldComponentUpdate）。通过方法渲染组件应该只针对简单的组件，即反应元素。见official docs here:

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

【讨论】：

【解决方案3】：

如果condition 中的状态发生变化，组件将重新渲染自身，这意味着component2 也会发生变化。

【讨论】：