React useContext Hook
React Context
React Context 是一種管理全域性狀態的方法。
它可以與 useState Hook 一起使用，比單獨使用 useState 更輕鬆地在深度巢狀的元件之間共享狀態。
問題
狀態應該由堆疊中需要訪問該狀態的最高父元件持有。
為了說明這一點，我們有很多巢狀的元件。堆疊頂部和底部的元件都需要訪問該狀態。
要在沒有 Context 的情況下實現這一點，我們需要將狀態作為“props”傳遞給每個巢狀元件。這稱為“props 鑽取”。
示例
將“props”傳遞給巢狀元件
import { useState } from "react";
import ReactDOM from "react-dom/client";
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</>
);
}
function Component2({ user }) {
return (
<>
<h1>Component 2</h1>
<Component3 user={user} />
</>
);
}
function Component3({ user }) {
return (
<>
<h1>Component 3</h1>
<Component4 user={user} />
</>
);
}
function Component4({ user }) {
return (
<>
<h1>Component 4</h1>
<Component5 user={user} />
</>
);
}
function Component5({ user }) {
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);
即使元件 2-4 不需要該狀態，它們也必須傳遞該狀態，以便它能夠到達元件 5。
解決方案
解決方案是建立 Context。
建立 Context
要建立 Context，您必須匯入 createContext 並對其進行初始化
import { useState, createContext } from "react";
import ReactDOM from "react-dom/client";
const UserContext = createContext()
接下來，我們將使用 Context Provider 來包裝需要狀態 Context 的元件樹。
Context Provider
將子元件包裝在 Context Provider 中並提供狀態值。
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}現在，此樹中的所有元件都將能夠訪問使用者 Context。
使用 useContext Hook
為了在子元件中使用 Context，我們需要使用 useContext Hook 來訪問它。
首先，在 import 語句中包含 useContext
import { useState, createContext, useContext } from "react";
然後，您可以在所有元件中訪問使用者 Context
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
完整示例
示例
這是使用 React Context 的完整示例
import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";
const UserContext = createContext();
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 />
</UserContext.Provider>
);
}
function Component2() {
return (
<>
<h1>Component 2</h1>
<Component3 />
</>
);
}
function Component3() {
return (
<>
<h1>Component 3</h1>
<Component4 />
</>
);
}
function Component4() {
return (
<>
<h1>Component 4</h1>
<Component5 />
</>
);
}
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);
