在 React 中，我们经常需要共享一些全局状态，例如用户信息、主题设置等。在传统的做法中，我们需要将这些状态通过 props 层层传递给子组件，这样做存在一些问题：
- 层级过深时，props 传递变得非常麻烦，容易出错。
- 如果需要在某个层级更新状态，需要将回调函数一层层传递下去。
- 如果有多个组件需要使用同一个状态，需要将状态传递给所有组件。
为了解决这些问题，React 提供了 Context API，可以让我们在组件树中共享状态，而不需要一层层传递。
什么是 Context
Context 是 React 提供的一种全局状态管理方案，可以让我们在组件树中共享数据。Context 由两部分组成：
- Provider：提供数据的组件，通过 value 属性传递数据。
- Consumer：使用数据的组件，通过函数形式获取数据。
如何使用 Context
使用 Context 的步骤如下：
- 创建 Context 对象
----- --------- - ----------------------
- 在 Provider 中传递数据
------------------- --------- -- ---- --- --- --- ---------------------
- 在 Consumer 中获取数据
-------------------- ------ -- -- ---- --- ---------------------
示例代码
下面是一个简单的示例，演示如何使用 Context 在组件树中共享主题设置。
------ ------ - --------- ---------- - ---- --------
----- ------------ - ----------------------
-------- ----- -
----- ------- --------- - ------------------
-------- ------------- -
------------------ -- --------- --- ------- - ------ - ---------
-
------ -
---------------------- -------- ------ ----------- ---
------- --
-------- --
------------------------
--
-
-------- -------- -
----- - ------ ----------- - - -------------------------
------ -
------- -------- ---------------- ----- --- ------- - --------- - ------ ---
------- ---------------------------- --------------
---------
--
-
-------- --------- -
----- - ----- - - -------------------------
------ -
---- -------- ------ ----- --- ------- - ------ - ------ ---
---------- -----------
------
--
-在上面的代码中，我们创建了一个主题设置的 Context，将其传递给了 Header 和 Content 组件。Header 组件通过 useContext 获取主题设置，并提供了一个切换主题的按钮，Content 组件仅仅是展示了一段文本，但是也使用了主题设置。
总结
使用 Context 可以让我们在组件树中共享数据，避免了 props 层层传递的问题。但是需要注意的是，Context 并不是万能的，如果需要在多个组件中共享数据，但是这些组件没有父子关系，可能需要使用其他方案，例如 Redux 等。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/660442ccd10417a222167ad3