Lin Chen   ·  3月前
2 貼文  ·  6 留言

React Context的小筆記

(挖咧,編輯幾次後,格式通通跑掉了lol)

在官方網站閱讀了相關資料後,對於Context的理解類似Redux的Store那般,可以將資料從Global傳送至底下的Component,而不需經過props一層層傳遞(當然還是跟Redux有所區別啦,不然Redux早就不見了)。

「什麼時候要用Context,而不使用props去傳遞data到children component(s)呢?」

端看你是否有個值,是全域(整個App)都用得到的,而中間可能有些Component用不到,但不透過props傳下去又不行的時候。(要一層一層傳太累了。)
官方給的例子是:已登入的使用者狀態、使用主題(theme)、偏好語言等。

首先,先於全App最上層的Component宣告Context,宣告方式為:
const ThemeContext = React.createContext(/*預設值*/)
ThemeContext可以為任意名,但operator右方必須是React.createContext,預設值不限形式,可以是string、obj等(應該吧?),且重點是,後續使用Context時可替換。

宣告完以後,再透過Provider,供應到底下所有的children component(s),大概長這樣:
const ThemeContext = React.createContext('light');

class Theme extends React.Components{
return(
<ThemeContext.Provider value={/*隨你改*/}>
<OtherComponents />
<AnotherComponents />
</ThemeContext.Provider>
)
}

Provider底下的Component(s)若還有包裹Component,都可輕鬆地取得Context的值(當然還是要打個幾行字才能取得啦)。

6/19續:

在Provider底下的子Component(s)若要取得Context的值,首先要先ThemeContext(在上面,還記得嗎?)指派給contextType,如下:
class OtherComponents extends React.Componenet{
//將Context值指派給contextType後,Context值便可用於各個地方,如生命週期方法
//寫法A( experimental public class fields syntax ):
static contextType = ThemeContext;
//寫法B:
// OtherComponents.contextType = ThemeContext;
render(){
//注意,好像一定要用this.context來取得該context值
return <ButtonExample theme={this.context}>
}
}

6/26補充hook的useContext:

其實大同小異,你可以在top level component宣告

const something = createContext(/*任意值*/)

並且記得將需要取得這個context的components,包裹在provider之下
最後再於使用前,宣告:

const theThing = useContext(something)

便可取用context!

不過要這樣使用的前提是,你的context的值已經設定好、不會再變動了 若會再變動,就要透過provider的方式去實做context

順便推薦這個教學影片,裡面還講到如何組合其他hook使用context
看完覺得:哇,這組合技也太酷了吧!
title: React Hooks useContext Tutorial (Storing a User)
https://youtu.be/lhMKvyLRWo0

  分享   共 237 次點閱
按了喜歡:
共有 2 則留言
尤川豪   ·  3月前
316 貼文  ·  221 留言

寫得很好

補充幾點

  1. props 一直往下傳,傳好幾層這個現象稱為 prop drilling 寫過幾次之後你會發現這樣很煩

  2. 印象中以前 redux 透過 provider 綁給 react 元件全域的背後實作,就是利用 react 的 context

  3. react-redux 跟 context 可以視為都在解決全域狀態的管理. redux 本身另有一個鮮明的特色是 immutable. 這讓 code 寫起來很不一樣. 習慣之後會發現 immutable 的美好. (這另外跟 functional programming 的觀念有關)

 
Lin Chen   ·  3月前
2 貼文  ·  6 留言

感謝補充,目前只知道redux的皮毛,還沒認真去看document跟創作者的教學影片(他講解得好難lol)。

您的留言
Lin Chen
2 貼文  ·  6 留言
查看所有文章