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

Question

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

w

问题是render(): { const component1 = condition ? renderComponent2() : null; const component2 = renderComponent2(); return ( <div> {component1} {component2} </div> ); } 在component2发生变化时会被破坏并重新呈现。我试图阻止它并保持原始元素。我尝试将condition添加到key但没有运气。

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

Answer 1

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

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

您可以找到proof of concept codepen here，其中包含以下内容：

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

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

更新：codepen现在还包含进一步的证据：

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

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

  

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

Answer 2

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

Answer 3

如果condition中的状态发生更改，则组件将重新呈现，这意味着component2也将更改。