React Hooks (9) useCotext

使用 useCotext

當有資料想在不同元件間共用時，可以將資料存入 useCotext 這個 hook，元件再從 useCotext 取用資料。

1. 將 createContext, useContext 解構出來

const { useState, useEffect, createContext, useContext } = React;

2. createContext 建立資料共用環境

const UserContext = createContext({});

3. 將 UserContext 包在需要資料的子元件外層，並將資料傳入 UserContext

const App = () => {
  const [username, setUsername] = useState('卡斯伯');

  return (<>
    <UserContext.Provider value={{ username, setUsername }}>
      <Greeting />
      <br />  
      <LoginForm />
    </UserContext.Provider> 
  </>)
}

4. 子元件中使用 useContext 取得資料

const Greeting = () => {
  const { username } = useContext(UserContext);

  return <>
    { username } 你好, 歡迎登入
    <DeepComponent /> 
  </>
}

進階使用方法

除了上面將狀態放在 App 元件再傳入 UserContext 元件裡的方法以外，也可以將資料直接放在 UserContext， App 就不管理狀態。

1. 建立 UserProvider 元件管理狀態，並將狀態存入 UserContext.Provider 回傳，children 會將子元件帶入

const UserProvider = ({ children }) => {
  const [username, setUsername] = useState('卡斯伯');
  const [isLogin, setIsLogin] = useState(false);

  return (<UserContext.Provider value={{ username, setUsername, setIsLogin, isLogin}}>
    { children }
  </UserContext.Provider>)
}

2. 使用 UserProvider 包覆子元件

const App = () => {
  return (<>
    <UserProvider>
      <DashBoard /> 
    </UserProvider>
  </>)
}

3. 子元件即可取得 userCotext 資料

const DashBoard = () => {
  const { isLogin } = useContext(UserContext);
  return (<>{ isLogin ? <Greeting /> : <LoginForm /> }</>)
}