30DaysChallenge 是自主性每兩天寫一篇技術相關的部落格

React

在上一篇提到 context 的概念與大致的語法

context 可以讓你在不管哪個元件位置都能很好的取用到你想要的資料

不用再透過資料的傳遞

但是這僅僅只是讀取而已，若想要狀態管理，仍需要使用 state 或其他方法

我們可以這樣包裝

import React, { useEffect, useState } from "react"

//創出一個空間
const AuthContext = React.createContext({
  isLoggedIn: false,
  //可以放一些登入相關function
})

//製作一個元件
export const AuthContextProvider = props => {
  //利用state存放狀態
  const [isLoggedIn, setIsLoggedIn] = useState(false)

  //這邊可以執行一些想預先執行的動作
  //useEffect...
  //function event handler...
  //就跟一般的元件一樣

  return (
    <AuthContext.Provider
      value=
    >
      {props.children}
    </AuthContext.Provider>
  )
}

export default AuthContext

然後放在最頂端

import App from "./App"
import { AuthContextProvider } from "./store/auth-context"

ReactDOM.render(
  <AuthContextProvider>
    <App />
  </AuthContextProvider>,
  document.getElementById("root")
)

一樣透過 useState 的方式來管理狀態

現在你可以再任何的地方使用const ctx = useContext(AuthContext)

const SomeWhere = () => {
  const ctx = useContext(AuthContext)

  return <div onClick={ctx.someFunction}>
    {ctx.isLoggedIn && ...}
    {!ctx.isLoggedIn && ...}
  </div>
}

並透過呼叫宣告的變數，在這個例子中是 ctx

ctx.isLoggedIn 或 ctx.someFunction等等

---

有一個小問題

既然 context 是設置在整個結構的最頂端，index or app in your case

只要值改變了，就會重新渲染，且是所有的東西

使用 context 的內容與時機，通常都是不會去頻繁更新，因為要一直渲染很累

「阿可是我就改變一個變數的值，可能count 1 到count 2，這樣也會變嗎?」

是的，假設這個問題的情況是在最頂端處理的話，就會影響到所有元件

為什麼會這樣呢? 留到下一篇說明 XD