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 />);
