如何使用钩子管理条件组件

Question

假设您有以下index.js代码：

const App = memo(props => {

    return (
        <Layout>
        // you can consider below code as a switch case 
        {
          {
            'NO_SESSION': <Login />,
            'NOTCONFIRMED_SESSION': <Confirm />
            'CONFIRMED_SESSION': <Home />
          }[sessionState]
        }
        </Layout>
    );
});

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

sessionState是某些逻辑的结果，取决于IndexedDB。代码是这样的：

const getSessionState = () => {
   if(// there is no session) 
      return "NO_SESSION"
   else if(// there is not confirmed session)
      return "NOTCONFIRMED_SESSION"
   else if(// there is confirmed session)
      return "CONFIRMED_SESSION"
}

所以我的问题：

  

使用react-hooks这样做是否合理？

     

如果可以，该如何实施？

Answer 1

是的，可以使用钩子，但是您应该问的更合适的问题是应该使用组件状态还是上下文。对于全局状态，上下文更有意义，因为您可能需要在下游组件中使用该状态。

您可以将该状态存储在上下文中，并使用useContext读取登录状态。