javascript - react : Prevent remount when parent rerenders

Question

我有一个组件 Split，它有两个 child 。第一个 child 将显示在屏幕的左侧，第二个 child 将显示在屏幕的右侧。如果屏幕宽度低于某个点，则只会显示右侧，左侧将从 DOM 中移除。

示例子项可以是 Sidebar 组件和 Content 组件。对于移动设备，我不想显示菜单，但有一个弹出的特殊移动菜单。

我的问题是:如何在不卸载和重新安装 Content 组件的情况下删除 Sidebar 组件？

我的 Content 组件在 componentDidMount 上获取数据，我不希望它再次重新获取或重新安装(因此丢弃用户输入)。

基本上我有这样的东西:

<Split>
  <Sidebar/>
  <Content/>
</Split>

Split 的渲染方法看起来像这样:

let children;
let firstChild = this.props.children[0];
let lastChild = this.props.children.pop();
if (this.state.responsive === 'singleColumn') {
  children = (
    <div>
      <div style={{display: 'none'}}>{firstChild}</div>
      {lastChild}
    </div>
  );
} else {
  children = (
    <div>
      {firstChild}
      {lastChild}
    </div>
  );
}

return (
  <div>
    {children}
  </div>
);

即使 {lastChild} 总是被渲染，无论如何，每次拆分必须重新渲染时它仍然会被卸载和重新装载!

即使有一个看起来像这样的渲染:

return (
  <div>
    {this.props.children.pop()}
  </div>
);

导致最后一个 child (永远不会改变)在渲染之前被卸载和重新安装。

如果我改为修改 Split 并将始终位于 DOM 中的组件作为属性传递，如下所示:

<Split staticComponent={<Content />}>
  <Sidebar />
</Split>

它工作正常。那为什么当我像这样 {this.props.children.pop()} 而不是 {this.props.staticComponent} 那样弹出最后一个 child 时它不起作用

有解决这个问题的明智方法吗？

Answer 1

终于解决问题了!我重写了 Split 的渲染，看起来像这样:

let left;
if (this.state.responsive !== 'singleColumn') {
  left = this.props.children.slice(0, -1);
}

return (
  <div ref="split" className={classes.join(' ')}>
    {left}
    {this.props.children[this.props.children.length-1]}
  </div>
);

这样最后一个 child 总是被渲染。显然 pop() 不起作用，因为我修改了触发奇怪行为的原始子数组。