這是本文件的舊版！

React Hook - useContext

Introduction

我在Study React所撰寫的第一個範例是系統的登入與登出，而登入狀態需要由上層元件傳遞給登入與登出元件做修改。在這範例中，由於上層元件與登入元件只有一層，所以我可以透過建構元將狀態傳遞過去；然而登出元件與上層元件相差太多層，傳遞並不是那麼容易。

在React Hook推出之前，有flux、Redux，或者是後來推出的Context，都可以解決這個問題；而本篇要介紹的useContext，我認為比前面幾個都還容易達到需求。

createContext

export const AuthContext = React.createContext(null);

function App(){ 

const [ state, setState ] = useState(false);
let route_target;
if( !state ) {
  route_target = <Route path="/" name="Login" component={LoginForm}/>;
} else
  route_target = <Route path="/" name="Home" component={DefaultLayout} />;
return (
  <AuthContext.Provider value={[state, setState]}>
    <HashRouter>
      <Switch>
      {route_target}
      </Switch>
    </HashRouter>
  </AuthContext.Provider>
);

}

useContext

Reference