javascript - 如何在挂载/卸载之间保持 React 组件状态？

Question

我有一个简单的组件 <StatefulView>保持内部状态。我有另一个组件 <App>切换是否 <StatefulView>被渲染。

但是，我想保留<StatefulView>安装/卸载之间的内部状态。

我想我可以实例化 <App> 中的组件然后控制是否渲染/挂载。

var StatefulView = React.createClass({
  getInitialState: function() {
    return {
      count: 0
    }
  },
  inc: function() {
    this.setState({count: this.state.count+1})
  },
  render: function() {
    return (
        <div>
          <button onClick={this.inc}>inc</button>
          <div>count:{this.state.count}</div>
        </div>
    )
  }
});

var App = React.createClass({
  getInitialState: function() {
    return {
      show: true,
      component: <StatefulView/>
    }
  },
  toggle: function() {
    this.setState({show: !this.state.show})
  },
  render: function() {
    var content = this.state.show ? this.state.component : false
    return (
      <div>
        <button onClick={this.toggle}>toggle</button>
        {content}
      </div>
    )
  }
});

这显然不起作用，新的 <StatefulView>在每次切换时创建。

这是一个 JSFiddle .

有没有办法在卸载后卡在同一个组件上以便重新安装？

Answer 1

由于在卸载时无法将状态保留在组件本身中，因此您必须决定应该将其保存在何处。

这些是您的选择:

1. React state in parent:如果父组件保持挂载状态，它可能应该是状态的所有者，或者可以为下面不受控制的组件提供初始状态。您可以在组件卸载之前将值传回。使用 React 上下文，您可以将状态提升到应用程序的最顶部(参见例如 unstated)。
2. 在 React 之外:例如use-local-storage-state .请注意，您可能需要在测试之间手动重置状态。其他选项包括 URL 中的查询参数、MobX 或 Redux 等状态管理库等。

---

我知道你正在寻找一个简单的解决方案，其中数据在 React 之外持久化，这个 Hook 可能会派上用场:

const memoryState = {};

function useMemoryState(key, initialState) {
  const [state, setState] = useState(() => {
    const hasMemoryValue = Object.prototype.hasOwnProperty.call(memoryState, key);
    if (hasMemoryValue) {
      return memoryState[key]
    } else {
      return typeof initialState === 'function' ? initialState() : initialState;
    }
  });

  function onChange(nextState) {
    memoryState[key] = nextState;
    setState(nextState);
  }

  return [state, onChange];
}

用法:

const [todos, setTodos] = useMemoryState('todos', ['Buy milk']);