來學 React 吧之五＿prop drilling 與 context

本文為學習 React 最後一個重要概念 useContext 的讀書筆記

prop drilling 簡單來說就是，當父層要傳遞 props 給子層時，假設 component 包了很多層，例如「一個按鈕外面包了三層 div 之類的」，那在按按鈕時，就必須把 props 一直傳下去，才能夠點擊到最後想要到達的子層，而 useContext 的出現就是為了解決層層傳遞的問題。

1. useContext 怎麼用？

a. 先引入兩個 hook

import { useContext, createContext } from "react";

b. 命名一個 TitleContext

const TitleContext = createContext();

c. 用 <TitleContext.Provider></TitleContext.Provider> 把要層層傳遞的父層包起來

d. 接著在子層「想要使用的 fn component 裡面」，const passContext = useContext(TitleContext)

import { useContext, createContext } from "react";

const TitleContext = createContext();

// 這裡是子層
function FinalLayer() {
  const passContext = useContext(TitleContext);
  return (
    <div>我是其他內容</div>
  )
}

// 這裡是父層
export default function Demo() {
  return (
    <TitleContext.Provider value={passContext}>
      <div>我是內容</div>
    </TitleContext.Provider>
  )
}

e. value 裡面也可以傳一個陣列

<TitleContext.Provider value={[title, setTitle]}>
  <div>我是內容</div>
</TitleContext.Provider>

在接收的時候就這樣寫：

const [title, setTitle] = useContext(TitleContext)

f. 還記得最初一開始有一個 theme provider 嗎？那個就是用 context 來實作的