如何保留“刚刚隐藏”组件的状态

Question

通过my previous question，我了解到React 会自动为子组件保留状态，这就是its documentation says：

什么不应该进入状态？

React 组件：根据底层的 props 和 state 在 render() 中构建它们。

现在我的问题是如何对我们刚刚隐藏的组件做同样的事情？

考虑一个在迭代中不会显示的子组件，同时我们希望保留它的状态以供将来恢复时使用！

为了说明我的确切意思，我设计了一个案例场景来向您展示。在以下代码中，您可以添加有状态的子组件。为每个组件提供了一个复选框，以便您可以标记它们。最后，第三个按钮将隐藏未标记的子组件。我正在寻找一种方法来恢复未标记组件的状态。

Executable code

class BlackBox extends React.Component
{
  constructor() {
    super();
    this.state = {
      checked: false,
      counter: 0,
    };
  }

  increment = () => {
    this.setState(Object.assign({}, this.state, { counter: this.state.counter+1 }));
  };

  switch = () => {
    this.setState(Object.assign({}, this.state, { checked: !this.state.checked }));
  };

  isChecked() {
      return this.state.checked;
  }

  render() {
    return (
      <span onClick={this.increment} title={this.props.id} style={{
        fontSize: '24pt',
        border: '1px solid black',
        margin: 10,
        padding: 10,
      }}>
        <input type="checkbox" onChange={this.switch} checked={this.state.checked} />
        {this.state.counter}
      </span>
    );
  }
}

class RedBox extends React.Component
{
  constructor() {
    super();
    this.state = {
      checked: false,
      counter: 0
    };
  }

  increment = () => {
    this.setState(Object.assign({}, this.state, { counter: this.state.counter+1 }));
  };

  switch = () => {
    this.setState(Object.assign({}, this.state, { checked: !this.state.checked }));
  };

  isChecked() {
      return this.state.checked;
  }

  render() {
    return (
      <span onClick={this.increment} title={this.props.id} style={{
        fontSize: '24pt',
        border: '1px solid red',
        margin: 10,
        padding: 10,
      }}>
        <input type="checkbox" onChange={this.switch} checked={this.state.checked} />
        {this.state.counter}
      </span>
    );
  }
}

class Parent extends React.Component {
    static blackCount = 0;
    static redCount = 0;
    state = {
      childCmps: [],
      showOnlyChecked: false,
    };
    constructor(props, context) {
      super(props, context);
    }

    addBlackBox = () => {
      this.setState(Object.assign({}, this.state, {
        childCmps: [...this.state.childCmps, { Component: BlackBox,  id: "black" + (++Parent.blackCount) }],
      }));
    };

    addRedBox = () => {
      this.setState(Object.assign({}, this.state, {
        childCmps: [...this.state.childCmps, { Component: RedBox, id: "red" + (++Parent.redCount) }],
      }));
    };

    showHide = () => {
      this.setState(Object.assign({}, this.state, {
        showOnlyChecked: !this.state.showOnlyChecked,
      }));
    };

    render() {
      let children = this.state.childCmps.map(child => <child.Component key={child.id} id={child.id} ref={child.id} />);
      return (
        <div>
          <button onClick={this.addBlackBox}>Add Black Box</button> 
          <button onClick={this.addRedBox}>Add Red Box</button>
          <button onClick={this.showHide}>Show / Hide Unchecked</button>
          <br /><br />
          {children.filter(box => !this.state.showOnlyChecked || this.refs[box.props.id].isChecked())}
        </div>
      );
    }
}

ReactDOM.render(
    <Parent />,
    document.getElementById("root")
);

Answer 1

简短的回答：

没有只有优点没有缺点的解决方案（在现实生活中以及在您的问题中）。
你真的只有3个选择：

1. 使用父状态并管理您的数据（在父组件和/或存储中）
2. 使用子状态并隐藏不需要的子状态（因此请寻找其他动画解决方案）
3. 使用子状态并接受未重新渲染的子状态丢失 -

您可能需要查看 redux 以使用商店。

长答案

如果你愿意

• 从 DOM 中移除一个子项（例如，用于 ReactCSSTransitionGroup 的动画目的）
• 并保留选中/未选中和计数器信息

那么您不能将其保持在子状态。根据定义，状态绑定到组件的生命周期。如果它从 DOM 中移除（= 未安装），那么您将丢失所有状态信息。

因此，如果您想保存此信息，则必须将此信息移动到父组件的状态（显然是每个子组件）。

您可以找到working codepen here。

关于此代码的一些其他说明：

• 您的孩子 <...Box> 组件现在变为纯 = 无状态组件
• 子组件调用父组件的方法，以更新检查状态或计数器增量。在这些方法中，它们传递自己的 ID
• 最好不要将整个组件存储在 state 中，而只存储确定组件的 props。
• 所以新的父状态包含一个对象数组，每个对象都有相关的prop数据
• 在渲染父级时：最好先过滤组件，然后再创建要渲染的组件数组
• 在父节点中，您需要新的方法（onCheck() 和onClick()）来更新数组中的特定对象的状态。需要一些特殊的操作来确保我们不会在这里直接改变状态。
• 对于setState()，您不需要执行Object.assign() 并再次传递所有状态。如果您提供的对象仅包含已更改的参数，则 react 将保持其他参数不变。

Answer 2

而不是完全从 DOM 中删除组件（就像您通过 filter 所做的那样，只需隐藏它。将 children.filter 替换为以下内容：

  {children.map((box, idx) => {
      var show = !this.state.showOnlyChecked || this.refs[box.props.id].isChecked();
      return <span key={idx} style={{display: (show? 'inline-block': 'none')}}>{box}</span>;
  })}