在 react 中，管理组件之间的数据至关重要，尤其是在多个组件需要访问相同数据的大型应用程序中。 prop 钻取（将 props 传递到组件树的多个级别）很快就会变得很麻烦。这就是 react 的 usecontext hook 的闪光点。 usecontext 允许您跨组件共享数据，而无需手动传递 props，这使其成为状态管理的宝贵工具。
在本文中，我们将首先详细解释 usecontext、其语法及其优点。然后，我们将通过构建两个迷你项目来巩固这种理解：
在本教程结束时，您将具备在任何 react 项目中自信地使用 usecontext 的能力。
usecontext 是一个 react hook，允许组件直接订阅上下文。它使组件能够从组件树中位于其上方的最近的提供程序访问全局数据，从而有助于避免 prop 钻取的麻烦。
以下是创建和使用上下文的基本语法：
import react, { usecontext, createcontext } from 'react';
const mycontext = createcontext(defaultvalue); // step 1: create a context
function mycomponent() {
const contextvalue = usecontext(mycontext); // step 2: use the context
return <div>{contextvalue}</div>;
}
import react, { usecontext, createcontext } from 'react';
const themecontext = createcontext('light'); // default theme is light
function themeprovider({ children }) {
return <themecontext.provider value="dark">{children}</themecontext.provider>;
}
function displaytheme() {
const theme = usecontext(themecontext); // consuming the context
return <p>the current theme is {theme}</p>;
}
function app() {
return (
<themeprovider>
<displaytheme />
</themeprovider>
);
}
在此示例中：
这涵盖了基础知识。现在，让我们深入研究项目，将这些知识应用到实际场景中。
我们的第一个项目是一个简单的主题切换器，它将演示如何使用 usecontext 来管理主题的全局应用程序状态。
import react, { createcontext, usecontext, usestate } from 'react';
const themecontext = createcontext();
export function themeprovider({ children }) {
const [theme, settheme] = usestate('light');
const toggletheme = () => settheme(theme === 'light' ? 'dark' : 'light');
return (
<themecontext.provider value={{ theme, toggletheme }}>
{children}
</themecontext.provider>
);
}
这里，themecontext 提供两个值：当前主题和切换它的函数。提供程序包装应用程序组件，使主题和切换功能全局可用。
function themetoggler() {
const { theme, toggletheme } = usecontext(themecontext); // access context values
return (
<button onclick={toggletheme}>
switch to {theme === 'light' ? 'dark' : 'light'} mode
</button>
);
}
function displaytheme() {
const { theme } = usecontext(themecontext);
return <p>current theme: {theme}</p>;
}
function app() {
return (
<themeprovider>
<displaytheme />
<themetoggler />
</themeprovider>
);
}
export default app;
现在，您可以通过单击按钮在浅色和深色主题之间切换，主题状态会显示在旁边。该项目演示了 usecontext 如何允许多个组件共享全局状态更改并对全局状态更改做出反应。
对于第二个项目，让我们构建一个简单的应用程序，使用 usecontext 跟踪用户的身份验证状态。
import react, { createcontext, usecontext, usestate } from 'react';
const authcontext = createcontext();
export function authprovider({ children }) {
const [isauthenticated, setisauthenticated] = usestate(false);
const login = () => setisauthenticated(true);
const logout = () => setisauthenticated(false);
return (
<authcontext.provider value={{ isauthenticated, login, logout }}>
{children}
</authcontext.provider>
);
}
function loginbutton() {
const { login } = usecontext(authcontext); // access login function
return <button onclick={login}>login</button>;
}
function logoutbutton() {
const { logout } = usecontext(authcontext); // access logout function
return <button onclick={logout}>logout</button>;
}
function userstatus() {
const { isauthenticated } = usecontext(authcontext);
return (
<p>{isauthenticated ? 'welcome back!' : 'please log in.'}</p>
);
}
function App() {
return (
<AuthProvider>
<UserStatus />
<LoginButton />
<LogoutButton />
</AuthProvider>
);
}
export default App;
现在，您有一个简单的身份验证状态应用程序，其中登录和注销按钮可以更新应用程序中的用户状态。该项目演示了 usecontext 如何在现实场景中处理应用程序的状态。
通过这两个项目，您已经了解了 usecontext 如何简化组件之间的数据共享，而无需进行 prop 钻取。主题切换器和身份验证状态项目为有效管理全局状态提供了实用的见解。无论您是切换主题还是处理用户身份验证，usecontext 都提供了一个强大的工具来构建高效且有组织的应用程序。
