useContext

今天來説說useContext，這個東西可以做成破產版的redux ，主要功能是建立一個global的樹避免產生一個'Props Hell'

先用一段簡單的code

// 我是寫了一個空物件，但其實這是預設值，寫什麼都可以，當<Provider value={} />
// 沒有assign value時會預設使用這個
const SomethingContext = createContext({});

然後接下來，如何丟值到整棵樹，就要利用context的provider

<SomethingContext.Provider value={...value} />

有寫過redux的人，應該感覺很熟悉齁，對他就是概念很像，透過value的props傳遞到各個子層，還有一個很重要的點/

如果value的值更改了， 所有的children都會重新re-render

接下來如何取得provider傳下來的值

1. 使用render props

<SomethingContext.Consumer>
	{(value) => {}}
</SomethingContext.Consumer>

1. 使用useContext

const [value, dispatch] = useContext(SomethingContext);

好用的displayName在debug好用

還有很多好用的 下回待續，待想好一個主題