在前端开发中，状态管理是一个非常重要的话题。通常，我们会使用一些框架或库来处理状态，如 Redux 或 MobX。这些工具可以帮助我们管理应用程序中的复杂状态，并提供一些强大的功能，如时间旅行和异步操作处理。
然而，对于小型项目或简单的状态管理场景，使用 Redux 或 MobX 可能会显得过于冗余。在这种情况下，React Hook useContext 可以提供一种更简单、更优雅的解决方案。
什么是 useContext？
React Hook useContext 是 React 16.8 中引入的一个新特性。它允许我们使用 React 的 Context API 来共享组件之间的状态，而无需通过 props 层层传递。
Context API 是 React 中用于跨组件层级共享数据的一种机制。它可以将数据传递到整个组件树中的任何组件，而无需显式地传递 props。在 React 中，Context API 通常与 Provider 和 Consumer 一起使用。
useContext 是一个 Hook，它可以让我们在函数组件中使用 Context API。它接受一个 Context 对象作为参数，并返回该 Context 的当前值。
如何使用 useContext？
要使用 useContext，我们首先需要创建一个 Context 对象。我们可以使用 createContext 方法来创建一个新的 Context 对象：
import React from 'react'; const MyContext = React.createContext();
接下来，我们可以使用 Context.Provider 组件将状态传递给整个组件树：
<MyContext.Provider value={/* some value */}> {/* children */} </MyContext.Provider>
在这里，value 属性接受一个值，可以是任何 JavaScript 对象。这个值将成为整个组件树中所有消费者组件的当前值。
最后，我们可以在任何消费者组件中使用 useContext 来获取当前的 Context 值：
import React, { useContext } from 'react'; const MyComponent = () => { const value = useContext(MyContext); return <div>{value}</div>; }
在这里，我们首先导入 useContext，然后使用它来获取 MyContext 的当前值。这个值将作为函数组件的返回值。
示例代码
下面是一个使用 useContext 实现全局状态管理的示例代码：
-- -------------------- ---- ------- ------ ------ - -------------- ----------- -------- - ---- -------- ----- --------- - ---------------- ----- ---------- - -- -------- -- -- - ----- ------- --------- - ------------ ------ - ------------------- -------- ------ -------- --- ---------- --------------------- -- -- ----- ----------- - -- -- - ----- - ------ -------- - - ---------------------- ------ - ----- ----------- ------------- ------- ----------- -- -------------- - ---------------------- ------ -- -- ----- --- - -- -- - ------ - ------------ ------------ -- ------------- -- -- ------ ------- ----展开代码
在这里，我们首先创建了一个 MyContext 对象，并在 MyProvider 组件中使用 useState 来管理 count 状态。我们将 count 和 setCount 存储在 Context 值中，并将其传递给 MyContext.Provider。
然后，我们可以在 MyComponent 组件中使用 useContext 来获取 count 和 setCount，并在 UI 中呈现 count 值和一个增量按钮。
最后，我们将 MyProvider 包装在 App 组件中，并将其呈现在页面上。
结论
React Hook useContext 提供了一种简单、优雅的方式来管理全局状态。它可以帮助我们避免使用 Redux 或 MobX 等重量级状态管理工具，并提供了一种更轻量级的解决方案。
使用 useContext 可以让我们在整个组件树中轻松地共享状态，并避免了通过 props 层层传递状态的繁琐过程。它是一个非常有用的工具，可以帮助我们更好地组织我们的代码，并提高代码的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677c60b75c5a933a3433254e
