React Hooks：useContext()
什么是 React Hooks？
它们是 React 中的一些函数，允许你为基于函数的组件添加 React 功能。
什么是 useContext hook？
这个 hook 用于高效地将状态传递到组件链的底层。过去，人们通常使用 props 传递来实现这一点。props 传递是指将状态值作为 props 传递到组件链的底层。通常，这会导致将 props 传递给不需要它们的组件。useContext hook 允许我们在不使用 props 传递的情况下将状态值传递到组件链的底层。
此钩子最适合用于向子组件传递全局值。例如，应用主题切换和已登录用户信息（用户 ID、用户名等）等。不建议使用此钩子替代状态管理库 Redux。目前，它还不够健壮，无法处理 Redux 的许多用例。此钩子非常适合只有少量全局状态的小型应用。
其语法遵循常见模式：
import { createContext, useContext } from "react";
//Initialize our context.
//null is the default value if none are later provided.
//Often this is done in a different file.
const UserContext = createContext(null)
const ParentComponent = () => {
//We wrap our children component in the Provider
return (
<UserContext.Provider value={'Aden'}>
<ChildComponent />
</UserContext.Provider>
);
};
const ChildComponent = () => {
//Access the context passed down from the ParentComponent
const user = useContext(UserContext)
return (
<>
<h1>Child Component</h1>
<p>{user}</p>
</>
);
};
export default ParentComponent;
以下是使用 useEffect 和 useState hooks 的示例：
import { useState, useEffect, createContext, useContext } from "react";
const UserContext = createContext(null)
const App = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
const fetchData = async () => {
//Fetches a list of ten users
const response = await fetch(
"https://jsonplaceholder.typicode.com/users"
);
// If the HTTP status code is 200-299
if (response.ok) {
const json = await response.json();
setUsers(json);
}
};
fetchData();
}, []);
return (
<UserContext.Provider value={users}>
<ChildComponent1 />
</UserContext.Provider>
);
};
const ChildComponent1 = () => {
//This component does not need the users data
return (
<>
<h1>ChildComponent1</h1>
<ChildComponent2 />
</>
)
}
const ChildComponent2 = () => {
const users = useContext(UserContext)
return (
<div>
<ul>
{/*If the data exists, display a list of
users names*/}
{users &&
users.map((user) => {
return <li key={user.id}>{user.name}</li>;
})}
</ul>
</div>
)
}
export default App;
有关 useContext 的更多信息，请参阅 React 文档：https://reactjs.org/docs/context.html
如有任何疑问或反馈，请留言。
文章来源：https://dev.to/fig781/react-hooks-usecontext-167h