介绍
在 React 应用中，组件间的状态共享是一个常见的需求。传统的方式是通过 props 将状态从父组件传递到子组件，但是当组件层级较深或者状态需要在非父子组件间共享时，这种方式会变得非常麻烦。React Context 提供了一种更便捷的方式来实现组件间状态共享。
React Context 是 React 16.3 新增的 API，它允许我们在组件树中传递数据，而不需要一级一级地手动传递 props。通过 Context，我们可以在组件树中的任意位置访问共享的数据。
创建 Context
要使用 React Context，首先需要创建一个 Context 对象。我们可以通过调用 React.createContext 方法来创建一个 Context 对象。例如：
const MyContext = React.createContext(defaultValue);
其中，defaultValue 是可选的默认值，它只有在没有匹配到 Provider 时才会被使用。
使用 Context
在组件中使用 Context，需要通过 Context.Consumer 组件来订阅 Context 的值。例如：
<MyContext.Consumer>
{value => /* 使用 value 值 */}
</MyContext.Consumer>当 React 渲染一个订阅了 Context 的组件时，它将从组件树中离该组件最近的那个匹配的 Provider 中读取当前的 context 值。例如：
<MyContext.Provider value={/* 某个值 */}>在这个例子中，所有订阅了 MyContext 的组件都将重新渲染，当 MyContext 的 value 值发生变化时。
示例
下面我们来看一个完整的例子。假设我们有一个 App 组件，它包含了一个 Header 组件和一个 Content 组件。我们想要在 Header 组件中显示一个计数器，当用户点击 Content 组件中的按钮时，计数器会加一。我们可以使用 React Context 来实现这个功能。
首先，我们在 App 组件中创建一个 Context 对象：
-- -------------------- ---- -------
------ ----- ---- --------
----- -------------- - ----------------------
----- --- ------- --------------- -
----- - -
------ -
--
-------------- - -- -- -
----------------------- -- --
------ --------------- - -
----
--
-------- -
------ -
------------------------
--------
------ -----------------
--------------- -------------------
--
-
---- ----------------
------- --
-------- --
------
--------------------------
--
-
-在这个例子中，我们创建了一个 CounterContext 对象，并将它用作了 App 组件的 Provider。我们将 count 状态和 incrementCount 方法传递给了 Provider 的 value 属性。
接下来，我们在 Header 组件中订阅了 CounterContext，并显示了 count 值：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- -------------------
----- ------ ------- --------------- -
-------- -
------ -
-------------------------
--- ----- -- -- -
--------
---------- ------------
---------
--
--------------------------
--
-
-
------ ------- -------最后，我们在 Content 组件中订阅了 CounterContext，并在按钮点击时调用了 incrementCount 方法：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- -------------------
----- ------- ------- --------------- -
-------- -
------ -
-------------------------
--- -------------- -- -- -
-----
------- ---------------------------------- --------------
------
--
--------------------------
--
-
-
------ ------- --------现在，当用户点击 Content 组件中的按钮时，计数器会加一，并在 Header 组件中更新显示。
总结
使用 React Context 可以实现组件间状态共享，避免了 props 层层传递的麻烦。创建 Context 对象后，我们可以通过 Provider 将数据传递给子组件，通过 Consumer 订阅数据并在组件中使用。React Context 是 React 16.3 新增的 API，它可以帮助我们更方便地处理组件间的状态共享问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65685223d2f5e1655d11ae96