如何保存 "just hidden" 组件的状态

Question

通过 I learned that React preserves the state for child components automatically and that's why its documentation says:

What Shouldn't Go in State?

React components: Build them in render() based on underlying props and state.

现在我的问题是如何对我们刚刚隐藏的组件执行相同的操作？

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

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

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

而不是完全从 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>;
  })}

Answer 2

简答：

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

使用 parent 声明和管理您的数据（在 parent 组件和/或商店中）
使用child状态和隐藏children你不需要（所以找到另一个动画解决方案）
使用 child 状态并接受状态丢失 children 而不是 re-rendered -

您可能想查看 redux 以了解如何使用商店。

长答案

如果你想

从 DOM 中删除一个 child（例如，为了 ReactCSSTransitionGroup 的动画目的）
并保留 checked/unchecked 和计数器信息

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

所以如果你想保存这个信息，你必须将这个信息移动到 parent 组件的状态（对于每个 child 显然）。

您可以找到 working codepen here.

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

您的 child <...Box> 组件现在变成了纯 = 无状态组件
child 组件调用 parent 上的方法来更新检查状态或计数器增量。在这些方法中，他们传递自己的 ID
最好不要将整个组件存储在状态中，而只存储决定组件的道具。
所以新的parent状态包含一个object数组，每个object都有相关的prop数据
在 parent 的渲染中：最好先过滤组件，然后再创建要渲染的组件数组
在 parent 中，您需要新方法（onCheck() 和 onClick()）来更新数组中特定的 object 状态。需要一些特殊的摆弄以确保我们不会在这里直接改变状态。
对于setState()，您不需要执行Object.assign()并再次传入所有状态。如果您提供的 object 仅包含已更改的参数，则 React 将保持其他参数不变。

如何保存 "just hidden" 组件的状态

How to preserve the state for a "just hidden" component

flux

reactjs