[React Hook 筆記] useContext

React Hook 系列文

1. 從最基本的 Hook 開始 useState, useEffect
2. Memorized Hook- useMemo, useCallback
3. useRef
4. useContext
5. useReducer
6. useLayoutEffect
7. Custom Hooks

🔖 文章索引
1. 前言
2. What’s Context Object?
3. What’s useContext?
4. 結論

一般來說，React 傳資料的方式都是一層一層把資料 props 傳到子層的

就算第二層 (Function Component)、第三層 (Button Group Compontn) 根本沒用到這資料，但為了傳到最底層 (button) ，每一層都還是必須要傳 props

寫久了會覺得麻煩，因為每一次都要這樣一層層傳資料下來 ( prop drilling)，我們不知道到底哪一層真的使用到了，Refactor 時可能也會忘了清掉某一層 Props?! 那，是否有更好的方式呢？

那就是 Context

介紹 useContext 前一定要先來說 Context 因為 useContext 只是他之中Context.Consumer 的 sugar syntax

What’s Context Object?

Context Object 是被 createContext() 這個 API 所建立，裡面有兩個子元件

• Provider: 傳遞 value 這個值