如果有錯誤，歡迎留言指教~ Q_Q

在各個 component 們都需要的狀態的

在前幾篇， component 間的傳遞是藉由 props 把狀態傳遞下去

如果不只是單純的父子間的一層層傳遞資料呢？

這時候可能就得一直把資料 props 再 props 的一層層傳下去

那可能在每個 component 就會遺漏了誰，

如果又多了需要這些資料的 component，那麼就又要再無限的傳遞下去

這些原因，可能會讓我們沒辦法好好維護資料

這時候我們有個方式：就是可以把狀態和資料存在 Context 裡面!

Context 是什麼咧~?

Context 的是意思是：前後關係、上下文

用 Provider 把那些 component 們包在一起

這些 component 就能一起使用存在 Context 裡的資料

就不用再一層一層的把狀態從上面傳到最下面

範圍要包多少都可以，可以包小部分(就像是作用域 Scope)

也可以把整個 app 包起來 (像 Global 全域的感覺)

如何使用 Context

1. 先 createContext() 吧！

把context 想像成一個很大的 object，裡面可以存很多狀態

( 因為他 component 沒有關係，所以可以不用寫在 component 裡 )

Context 的 default value 要放什麼都可以：null, [] , {}, number.....

建議統一放 object ，才不會混亂~

像是...

export const TabsContext = createContext({
    activeIndex: 0,
    setActiveIndex: () => {}
});

你可以想像，存的 Context，不一定是單純值，也可以有 function

就像 useState 一樣，有一組 getter value，和 setter value

2. 用 Provider 把想要的範圍包起來吧!

在想要使用 Context 的範圍，用 Provider 把想要的範圍包起來吧

如果 Provider 有 value，就會以 value 的值 props 給大家為主

不然就是 Context 裡的預設

const value = { ... };

const TabsProvider = ({ children }) => {

  return (
      <TabsContext.Provider value={{ activeIndex, setActiveIndex }}>
        {children}
      </TabsContext.Provider>

    )
};

3. 在需要 Context 的地方使用的 useContext 吧

const context = useContext(TabsContext);

命名方式：[項目]+Content → AuthContext、TabsContext

當 component 上層最近的 <MyContext.Provider> 更新時，該 hook 會觸發重新 render，並使用最新傳遞到 MyContext 的 context value 傳送到 MyContext provider。即便 ancestor 使用 React.memo 或 shouldComponentUpdate，重新 render 仍然從使用 useContext 的 component 本身開始。

Context 可以再包 Context

誰包誰都可以，如果 Context 之間有資料流的順序才有差~

<AuthContext.Provider>
    <UserContext.Provider>
        // ...
    </UserContext.Provider>
</AuthContext.Provider> 

Context 不要包到太多

如果你範圍包得太大，那可能會不知道誰影響誰

大家一起共享的 context 值，被某處改變後，大家就會一起 render！

ref

https://zh-hant.reactjs.org/docs/hooks-reference.html#usecontext

https://codesandbox.io/s/usecontext-lwd0j?file=/src/components/tabs.jsx