如何在已安裝和卸載的React組件中保留狀態？

Question

現在，我具有三個主要組件，它們處於一種選項卡布局中，其中一個標題位於頂部，並且其中一個活躍的組件是通過一個非常簡單的哈希路由器在頂級App組件中進行控制的。

現在，如果我在Profile組件中設置了一個狀態，那么當我切換到其他組件之一時，該狀態將被拋出。

我該如何預防？ 我應該將狀態放到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 。