防止React重新呈现特定的子组件 [英] Prevent React from re-rendering a specific child component

问题描述

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

I have a react component that conditionally renders several child components. Simplified code is just:

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

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

问题在于 component2 条件发生变化时，c>就会被破坏并重新呈现。我试图阻止它并保持原始元素。我尝试将密钥添加到 component2 ，但没有运气。

The problem is that component2 is getting destroyed and re-rendered whenever the condition changes. I'm trying to prevent that and keep the original element around. I tried adding a key to component2 with no luck.

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

[edit] This is happening even when component1 always exists and I change flag on it to hide it or not with CSS :/

推荐答案

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

Form the example code, your component2 will not be destroyed and re-mounted again. React will run any render and possibly other lifecycle methods, but React will Update the component in the DOM in place.

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

Maybe your code is more complicated. Which causes react to think that you are not re-rendering component2, but instead, are trying to render a whole new component. But again, from your example code this is not clear.

您可以找到概念证明代码在这里，它执行以下操作：

You can find proof of concept codepen here, which does the following:

• 它呈现2个实例 component2 ，绿色背景。


• 按钮可以（非法）将第一个组件的背景颜色更改为红色，除了反应的知识。


• By单击按钮，react将重新渲染2个组件。


• 背景颜色保持红色，这证明只响应更新组件，并且不会破坏。

• It renders 2 instances of component2, with a green background.
• Button can (illegally) change background color of the first component to red, outside of react's knowledge.
• By clicking the button, react will re-render the 2 components.
• The background-color remains red, which is proof that react only updates component, and does not destroy.

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

React will NOT reset the background color to green, because react thinks (from its virtual DOM) that the background color is unchanged and still green.

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

UPDATE: The codepen now also contains further proof of how it CAN happen:

• if您在概念验证中更改了返回的HTML类型（从< p> 元素到< h1> 元素）


• react将不会将其识别为相同的元素，并销毁原始元素并插入新元素。

• if you change the type of HTML returned (from <p> element to <h1> element in proof of concept)
• react will NOT recognize it as the same element, and destroy original and insert a new element.

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

PS: because your example code creates the component through a method call, any lifecycle methods (such as shouldComponentUpdate) should NOT be applied. Rendering components through methods should only be done for simple components, i.e. react elements. See official docs here:

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

A ReactElement is a light, stateless, immutable, virtual representation of a DOM Element.

这篇关于防止React重新呈现特定的子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！