介绍
react context api 是一种在多个组件之间共享状态的方法，无需通过组件树的每个级别传递数据。 react context api 本质上创建了一个数据层，允许组件订阅和访问数据，而无需成为提供数据的组件的直接子组件。
为什么使用 react context api
上下文 api 创建了一个可通过整个应用程序访问的全局状态，从而导致组件中的简单且结构化的数据流，并使漏洞代码更清晰、更有组织。
了解基础知识
通过整篇文章，为了简单起见，我们将创建一个全局主题上下文。
创建上下文
我们将创建一个名为 themecontext.jsx 的文件，并在其中传递以下逻辑。
创建上下文可以通过简单的步骤完成，即使用默认选项导入和调用createcontext
import {createcontext} from 'react'
export const themecontext = createcontext('light')
我们还需要更改主题模式，因此我们将在默认选项中添加一个功能。
import {createcontext} from 'react'
export const themecontext = createcontext({
theme: 'light',
settheme: () => {}
})
创建提供者
为了让我们的上下文 api 可以通过所有组件访问，我们需要创建一个提供程序，然后使用上下文提供程序包装我们的应用程序或其中的一部分。在这种情况下，我们将包装整个应用程序。
大多数上下文 api 逻辑也将位于提供程序内部，对于我们的情况，我们只需要一个 usestate 来更改主题模式，但可以将更昂贵的逻辑放置在上下文提供程序中。
步骤：
- 导入 usestate 因为我们需要它。
- 创建一个功能组件并将其导出以获得更好的命名约定，我们将其称为themeprovider。
- themeprovider 必须接受子项，因为我们要将其包装在 main.jsx 文件中的应用程序中（我正在使用 react 和 vite）。
- 创建一个主题状态，在我们的例子中只需要逻辑。但这里可以使用更复杂的逻辑。
- return themecontext.provider 第一步创建的themecontext，然后传递给它主题，将theme设置为值，因为我们想要访问其他组件中的这些值。
import {usestaet} from 'react'
export const themeprovider = ({children}) => {
const [theme, settheme] = usestate('light')
return (
<themecontext.provider value={{theme, settheme}}>
{children}
</themecontext.provider>
)
}
下一步是转到应用程序的起点，这适用于我们的案例，您可以根据您的用例选择其他位置。
导入 themeprovider 并用我们的上下文提供程序包装 <app />。此步骤确保主题、settheme 状态可通过整个应用程序访问。
createroot(document.getelementbyid('root')!).render(
<strictmode>
<themeprovider>
<app />
</themeprovider>
</strictmode>,
)
消费提供者
现在在任何其他组件中，我们需要从react调用usecontext，从themecontext.jsx文件调用themecontext。
然后解构主题，设置主题值并在你的组件中使用它们。
import {usecontext} from 'react'
import {themecontext} from './themecontext'
const app = () => {
const {theme, settheme} = usecontext(themecontext)
// some logic to change background color here
return(
<div>
<button onclick={() => settheme("light")}>light</button>
<button onclick={() => settheme("dark")}>dark</button>
</div>
)
}
export default app;
使用自定义 react hook 增强 context api
ps：我已经创建了一篇关于 react 中自定义钩子入门的帖子，如果您有任何问题，请点击这里
我们可以通过定义自定义react hook来避免从react和themecontext调用usecontext。
在 themecontext.jsx 文件中创建一个名为 usetheme
的自定义钩子
const usetheme = () => {
const context = usecontext(themecontext)
if (!context) throw new error('something went wrong!')
return context
}
在其他组件中只需导入这个自定义钩子
import {useTheme} from 'themeContext'
const App = () => {
const {theme, setTheme} = useTheme()
return(...)
}
结论
在本指南中，我们深入了解了上下文 api，并演示了它在跨应用程序组件传输数据方面的功效。我们创建了一个上下文及其提供程序，并将我们的应用程序与上下文提供程序包装在一起，并学习如何使用提供程序，甚至通过使用自定义挂钩来增强代码。
感谢您的阅读
