React Hooks - useContext

当我们要将父元素的资料传递到子元件的时候会使用 props，但假设有很多个 component，曾曾曾祖父元件要传递 props 给子元件的话，要把 props 每层一直传下去，尽管某些 component 根本不会用到这个资料却也要帮忙传，这样复杂又麻烦的传递方式会让程序码变得很大，也很容易出现错误讯息，为了解决这问题，我们可以使用 useContext Hook（如果程序更大可以用 Redux）。

useContext 在 React 中为全域，能在多个 component 间跨组件共享资料，例如：主题深浅色模式、注册及登入的 Token，或是用户资料等，通常用在不常需要被变动的值或多个不同层级的元件间的传递，如果不是的话，使用 props 传递就好，因为当 context 更新时所有有用到 useContext 的 component 都会重新 render，过度使用的话会让效能变得很差。

使用方式：

• import createContext 并创造 createContext()，被创造出来後，会 return 一个里面有 Consumer 和 Provider 的 context object。

import React,{ createContext } from 'react'
const dataProvider = createContext();
console.log(dataProvider);

• 传递资料时使用 Context.Provider 包住，并在 provider 中放入需要传递的 props value

// 引入 createContext
import { createContext } from 'react';
// 创造 context object
export const xxxContext = createContext();
// 渲染子元件时外面用一对 Context.Provider 包住，并透过 value 属性传递给後代元件
export const DataProvider = () => {
    return(
        <xxxContext.Provider value={ zzz }>
            // 需要 context object 的 component
        </xxxContext.Provider>
    )
}

• 接收资料时使用 Context.Consumer 包住，但在 function component 内使用 useContext() 即可取得 context object。

// 引入 useContext
import { useContext } from 'react';
// 拿已创造完成的 context object 来做使用
import { xxxContext } form './DataProvider.js'
// 执行 useContext()，接收由 createContext 回传的 context object，回传该 context 目前的值
const yyy = useContext(xxxContext);

例如：

// 引入 createContext 和 useContext
import { createContext,useContext } from "react";
// 创造 Context object
const UserContext = createContext();
// 使用 Provider 传递 value 给 User
export default function App() {
  return (
    <UserContext.Provider value="Hello">
      <User />
    </UserContext.Provider>
  );
}
// User 使用 useContext() 接收来自 UserContext 的资料
function User() {
  const value = useContext(UserContext);
  return <h1>{value}</h1>;
}

此时可以看到网页上显示 Hello