我有一个有条件地呈现几个子组件的react组件。简化的代码只是：
render(): {
const component1 = condition ? renderComponent2() : null;
const component2 = renderComponent2();
return (
<div>
{component1}
{component2}
</div>
);
}
问题是component2每当condition发生变化时都会被破坏和重新渲染。我试图阻止这种情况并保留原始元素。我尝试添加一个keyto component2，但没有运气。
[编辑] 即使component1始终存在，也会发生这种情况，我更改其上的标志以使用 CSS 隐藏或不隐藏它：/
你试过用shouldComponentUpdate 来做吗？这正是这个函数应该用来做什么的。只需将其添加到您的component2并在其中添加适当的条件即可。
形成示例代码，您component2将不会被破坏和重新安装。React 将运行任何render和可能的其他生命周期方法，但 React 将就地更新DOM 中的组件。
也许你的代码更复杂。这导致react认为您没有重新渲染component2，而是试图渲染一个全新的组件。但同样，从您的示例代码中，这并不清楚。
您可以在此处找到codepen 的概念证明，它执行以下操作：
component2以绿色背景呈现 2 个实例。React 不会将背景颜色重置为绿色，因为 React 认为（从其虚拟 DOM 中）背景颜色没有改变并且仍然是绿色。
更新：代码笔现在还包含进一步证明它是如何发生的：
<p>元素到<h1>元素）PS：因为您的示例代码通过方法调用创建组件，所以shouldComponentUpdate不应应用任何生命周期方法（例如）。通过方法渲染组件应该只为简单的组件完成，即react元素。在此处查看官方文档：
ReactElement 是DOM 元素的轻量级、无状态、不可变的虚拟表示。
如果condition组件中的状态发生变化，则会重新渲染自身，这意味着它component2也会发生变化。