Day 14 - useContext

如果有错误，欢迎留言指教~ 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