react 使用 useContext 實現跨組件存取狀態

我們在傳狀態到子組件時最常用的就是props,但是如果我們的組件非常多層,不可能一層一層props傳下去,這時候就可以使用redux或是react useContext hook來實現。今天就是要來介紹:useContext


使用的方式就是在巢狀組件中的最頂層創建Context存放所有狀態,然後在他之下的所有組件(不一定要直屬下一層)都可以存取。

先假設組件關係:

--App.js
----TodoList.js
------TodoItem.js
<App>
  <TodoList>
    <TodoItem />
    <TodoItem />
  </TodoList>
</App>

 

創建Context

import React, {  createContext } from 'react';
export const AppContext = createContext()
<AppContext.Provider value={{...}}>
  <App>
    //...
  </App>
</AppContext.Provider>

在value中可以放入你想統一在最高層管理的狀態,可以是一般常數、狀態、方法甚至redux資料的等:

const appData = useSelector(state => state.app.data);
const { username } = useSelector(state => state.user);
const [loading, setLoading] = useState(false);
const handleGetUsers = () => { //... };

const appContextValue = {
  appData,
  username,
  loading,
  handleGetUsers
}

將 value 放到Provider中:

<AppContext.Provider value={appContextValue}>
  <App>
    //...
  </App>
</AppContext.Provider>

跨組件使用Context

我們如果要在TodoList使用這些狀態,其實可以直接props進去就好,但是TodoItem要取用狀態,就可以使用到Context。

import React, { useContext } from 'react';
import { AppContext } from '../App';


const TodoItem = () => {
  const { username } = useContext(AppContext)
  return <div>{ username }</div>
}

export default TodoItem;

這樣我們就不用另外安裝redux,也不用從App一路props到最底層組件囉。

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

---------------------------

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。