在开发现代 Web 应用程序时，你需要管理信息的状态，这通常包括初始化、响应用户操作、检查数据有效性等等。你可以使用传统的状态管理库（例如 Redux 或 MobX），也可以使用 React 核心库提供的 Context API。
React Context API 可以帮助你简化应用程序状态管理和共享状态，这篇文章将介绍如何使用它。它旨在深入讲解 Context API 中的概念和与 React 组件之间的通信，以帮助你构建更可靠和可维护的应用程序。
什么是 React Context API？
React Context API 是 React 库中的一项功能，它允许你将数据（例如日间模式）传递给整个应用程序，而不必手动将它们传递给每个组件。在更复杂的应用程序中，使用 Context API 可以帮助你避免对传递数据进行“层叠”的痛苦。
创建一个 Context
在 React 中，你可以通过调用 React.createContext 函数来创建一个 Context。通常情况下，你会在应用程序的根级别上创建它。
import React from 'react'; const myContext = React.createContext(defaultValue);
在上面的代码中，defaultValue 是一个可选的参数，在没有 Provider 的情况下使用。
创建 Provider
现在，我们需要创建一个 Provider，以便为应用程序中的所有组件提供访问上下文信息的方法。你可以在 Provider 内部将数据存储在状态或上下文中。
-- -------------------- ---- -------
----- ---------- ------- --------------- -
----- - -
------ --------
--
----------- - -- -- -
----------------------- -- --
------ ----- --- ------- - ------ - --------
----
--
-------- -
------ -
-------------------
--------
------ -----------------
------------ -----------------
--
-
---------------------
---------------------
--
-
-在上面的代码中，我们使用 <myContext.Provider> 将 theme 和 toggleTheme 传递给了子组件。
使用 Consumer
通过使用 myContext.Consumer 组件，你可以在应用程序的任何地方访问 Provider 中存储的数据和方法。使用 Consumer 组件时，你必须传递一个回调，该回调将以接收上下文的形式呈现给组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- --------------
----- ----------- ------- --------------- -
-------- -
------ -
--------------------
--------- ------------- -- -
-----
---------- ------ -----------
------- ---------------------------- --------------
------
--
---------------------
--
-
-在上面的代码中，我们将 theme 和 toggleTheme 异步处理，并将它们呈现在 MyComponent 中。
多个 Context
在更大的应用程序中，你可能需要使用多个 Context 来管理不同的状态。在这种情况下，你可以将它们合并成一个对象，并使用另一个 Provider 来传递整个对象。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- --------------
------ -------------- ---- -------------------
----- ---------- ------- --------------- -
-------- -
------ -
------------------- ------------
------------------------ ------------
---------------------
--------------------------
---------------------
--
-
-在上面的代码中，我们将 MyContext 和 AnotherContext 组合在一起，并将它们呈现在 MyProvider 中。这类似于 Redux 中的 combineReducers 方法。
总结
React Context API 提供了一种简单的方法来共享数据，并将它们传递给应用程序中的所有组件。使用 Context API 可以使您的代码更易于维护，并使您的组件更具可重用性。此外，Context API 还可以减少您的应用程序中的嵌套和代码量。
愿你在你的下一个项目中成功地使用 React Context API 来简化应用程序状态管理！
示例代码：https://codesandbox.io/s/simple-react-context-api-ywnr0
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482802a48841e98941e4c91