React Hooks 是 React 16.8 中引入的新特性，它为函数式组件提供了一种类似于类组件中的 state 和生命周期方法的方法。其中，useContext 是其中一个最为常用的 Hook 之一，它能够让我们更好地处理组件间的通信和共享状态。
什么是 useContext？
在 React 中，有时候需要让子组件可以访问其父组件或祖先组件中的数据。而如果使用 props 属性在多层组件中进行数据传递，会让代码变得非常冗长。这时候我们可以使用 useContext 来简化这个过程。
useContext 可以让我们在一个组件中消费掉一个由上层组件提供的 context（上下文）数据。所谓 context，就是一个跨组件层级共享数据的方式。
它的用法如下：
const MyContext = React.createContext(defaultValue);
其中 defaultValue 是当当前组件没有匹配到任何 Provider 时所使用的默认值。
父组件通过 MyContext.Provider 组件提供数据，子组件则通过 useContext 将数据“消费”掉。
<MyContext.Provider value={/* 某个值 */}>
<Child />
</MyContext.Provider>const Child = () => {
const someValue = useContext(MyContext);
// ...
}如何使用 useContext？
在示例中，我们创建了两个组件 Parent 和 Child，并在 Parent 组件中使用 useContext 向所有子孙组件提供了一个名为 ThemeContext 的上下文。
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
----- ------------ - -----------------------------
----- ------ - -- -- -
------ -
---------------------- -------------
------ --
------------------------
--
--
----- ----- - -- -- -
----- ----- - -------------------------
------ ------------------------
--
------ ------- -------在上面的代码中，我们使用 React.createContext 方法创建了一个默认值为 'light' 的 ThemeContext 上下文，并在 Parent 组件中使用 ThemeContext.Provider 组件提供了自定义的 'dark' 值。
在 Child 组件中，我们使用 useContext 方法消费了 ThemeContext 上下文，并将其值赋予了 theme 变量，最后将其渲染到页面中。
更好的做法是将 ThemeContext 上下文分离出来成为单独的文件，便于管理和共享。
// ThemeContext.js
import React from 'react';
const ThemeContext = React.createContext('light');
export default ThemeContext;-- -------------------- ---- -------
-- ---------
------ ----- ---- --------
------ ------------ ---- -----------------
------ ----- ---- ----------
----- ------ - -- -- -
------ -
---------------------- -------------
------ --
------------------------
--
--
------ ------- --------- -------------------- ---- ------- -- -------- ------ ------ - ---------- - ---- -------- ------ ------------ ---- ----------------- ----- ----- - -- -- - ----- ----- - ------------------------- ------ ------------------------ -- ------ ------- ------
总结
useContext可以让我们在不使用 props 的情况下在组件之间共享数据和状态。useContext接受一个 context 对象并返回其中的值。- 上下文对象应该被放在单独的文件或模块中。
- 下层组件可以使用
useContext来消费上层组件的 context 值。
希望本文对你的学习和使用 React Hooks 有所帮助。如果你想了解更多 Hook 的知识，请查看 React 官方文档上的相关内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e70d69f6b2d6eab32667c2