React Hook - useContext - 筆記長也NotesHazuya

React Hook - useContext

2021-07-09 00:44:00   ReactJS

useContext 的使用時機

這一篇其實不太算是入門篇章的部分,不過提到 hook 也不得不提到 useContext 。

props 傳遞方式

講到使用時機,先提一下過去 props 傳遞資料通常都要一層一層傳遞給子層的元件,例如今天有 A / B / C  三個元件,而 A 元件要傳遞 props 給 C  元件,就只能透過 A -> B -> C 的方式傳遞,即便 B 元件根本沒要用到 A 元件的 props。

這樣寫久了會覺得很煩,而且一旦層數更多,就更容易遺漏某層的傳遞了。

也就是說,如果需要一層傳一層的時候,useContext 也許是個好選擇。

建立 Context Provider

Context 會有一個 Provider,也就是負責傳遞數值的。還會有一個 Consumer 來負責接收值。

首先我們在最上層的 App.js 這個檔案建立一個Context Provider,並使用 A 與 B 元件:

import { useState, createContext } from 'react';
import A from './A';
import B from './B';

export const ThemeContext = createContext(); 
const App = (props) => {

  const [ dark, setDark ] = useState("isDarkMode");
  
  return (  
    <>
    <ThemeContext.Provider value={dark}>
      <A/>
      <B/>
    </ThemeContext.Provider>
    </>
  );
};
export default App;

用 Provider 把要使用的元件包起來,並傳遞 value 這個 props。而 export 是為了讓其他元件可以 import 這個 Context。

使用  useContext 取得 value

A.js

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

const A = ()=>{
    const darkTheme = useContext(ThemeContext)
    return(
        <p>{darkTheme}</p>
    )

}
export default A;

B.js

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

const B = ()=>{

    const darkTheme = useContext(ThemeContext)
    return(<p>{darkTheme}</p>)

}
export default B;

A 與 B 這兩個元件都只是很簡單的利用 useContext 來取得 ThemeContext Provider 的 Value 值。

執行之後,可以在畫面上看到這樣:

isDarkMode

isDarkMode

可以看到,所有被 Context Provider 包起來的元件都可以使用 useContext 取得 value 的值,注意 useContext 本身要傳入 Context 本身自己(也就是我們在 App.js 使用  createContext 建構子建立的物件)。

結論

useContext 本身不是要用來取代 props的,而是給予更簡潔的多層傳遞 props 的方式,所以要依照整體架構情境來做選擇。而且目前 Context 有一個問題,只要 Context 的數值變動了,被包覆在 Provider 下的子元件都會被 re-render ,所以比較適合放不常變動的數值,不然很容易遇到效能問題。

關於作者


長也

資管菸酒生,嘗試成為網頁全端工程師(laravel / React),技能樹成長中,閒暇之餘就寫一些筆記。 喔對了,也愛追一些劇,例如火神跟遺物整理師,推推。最愛的樂團應該是告五人吧(?)