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