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

Question

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

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

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

问题是component2每次condition更改时都会被破坏并重新呈现.我试图阻止它并保持原始元素.我尝试添加一个key到component2没有运气.

[编辑]这种情况即使component1总是存在也会发生,我在其上更改标记以隐藏或不使用CSS:/

Answer 1

您是否尝试过使用shouldComponentUpdate来做到这一点？这正是该函数的用途。只需将其添加到您的component2并在里面添加适当的条件即可。