javascript - 如何在安装和卸载的 React 组件中保留状态？

Question

现在，我在一种选项卡布局中拥有三个主要组件，顶部有一个标题，其中一个处于事件状态是通过一个非常简单的哈希路由器在顶级应用程序组件中控制的。

现在，如果我在我的配置文件组件中设置一个状态，如果我切换到其他组件之一，该状态将被丢弃。

我怎样才能防止这种情况发生？我应该将状态放在 App 组件上，还是 Redux 或 Flux 之类的东西有用？

  Home   |   About   |   Profile
-----------------------------------
|                                 |
| Content                         |
...

顶级组件:

function App(props) {
  switch (props.location[0]) {
    case '':
      return <Home />;
    case 'about':
      return <About />;
    case 'profile':
      return <Profile />;
    default:
      return <NoMatch />;
  }
}

App.propTypes = {
  location: React.PropTypes.array.isRequired,
};

function renderOnHashChange() {
  let location = window.location.hash.replace(/^#\/?|\/$/g, '').split('/');
  const application = <App location={location} />;

  ReactDOM.render(application, document.getElementById('app'));
}

window.addEventListener('hashchange', renderOnHashChange, false);

renderOnHashChange();

Answer 1

简单的答案是，您需要使用某种存储来保留应用程序的全局状态。这取决于你的选择；您已经找到了一些流行的示例，但还有更多示例。通过调度操作来更新存储。

我不建议向顶级组件添加状态，因为这需要您通过应用程序的每一层传递回调来调用 setState。