React 中 useContext 的基本使用和原理解析

2025-11-03
陕西
本文字数：2857 字
阅读完需：约 9 分钟

React 中 useContext 的使用方法

在 React 中，useContext 是一个内置的 Hook，用于在函数组件中轻松访问 Context（全局公共状态），避免了手动逐层传递 props 的复杂性。它依赖于 Context API，通过 Provider 提供数据，后代组件通过 useContext 消费数据。以下是详细的使用方法和步骤，基于 React 官方指南和实践经验。

1. 创建 Context 对象

首先需要使用 React.createContext 创建一个 Context 对象。这个对象包含 Provider 和 Consumer 组件，但 useContext 简化了消费过程。

import React from 'react';// 创建Context，可设置默认值（可选）const MyContext = React.createContext(defaultValue);

复制代码

defaultValue 是当组件上方无 Provider 时的回退值，通常设为 null 或初始状态。

2. 使用 Provider 提供数据

在父组件中，用 `` 包裹子组件，并通过 value 属性传递数据。Provider 必须位于调用 useContext 的组件之上。

import React from 'react';import ChildComponent from './ChildComponent';import MyContext from './MyContext';
function ParentComponent() {  const sharedData = { theme: 'dark', user: 'Alice' }; // 共享数据  return (           {/* 后代组件可访问sharedData */}      );}

复制代码

注意：Provider 的 value 变化时，所有消费该 Context 的组件会自动重新渲染。

3. 在后代组件中使用 useContext 消费数据

在后代组件中，导入 Context 对象并调用 useContext，直接获取 Provider 提供的 value。

import React, { useContext } from 'react';import MyContext from './MyContext'; // 导入父组件中的Context
function ChildComponent() {  const publicData = useContext(MyContext); // 调用useContext获取数据  return (          当前主题: {publicData.theme}      {/* 示例：渲染图片或其他UI */}            );}

复制代码

关键点：
useContext(MyContext) 返回最近的 Provider 的 value；若无 Provider，则返回 defaultValue 。
代码简洁，无需嵌套 ``。
Context 变化时，React 会触发组件重新渲染，确保数据最新。

4. 完整代码示例

整合以上步骤，一个简单应用：

// 文件: Context.jsimport React from 'react';export const ThemeContext = React.createContext({ theme: 'light' });
// 文件: App.js (父组件)import React from 'react';import { ThemeContext } from './Context';import Child from './Child';
function App() {  return (                );}
// 文件: Child.js (后代组件)import React, { useContext } from 'react';import { ThemeContext } from './Context';
function Child() {  const { theme } = useContext(ThemeContext);  return 当前主题: {theme}; // 输出: 当前主题: dark}

复制代码

在类组建中，useContext 的使用方法

在类组件中使用 Context 有两种方式：

使用 static contextType 属性（只能订阅单一 Context）
使用 Context.Consumer（可订阅多个 Context）

而在函数组件中，我们使用 useContext 钩子（可订阅多个 Context）。

下面我将详细说明类组件中使用 Context 的方法，并对比函数组件中的使用差异。

1、使用 `static contextType`（单一 Context 订阅）

步骤：

创建 Context：const MyContext = React.createContext(defaultValue);
在类组件中通过 static contextType = MyContext; 指定要订阅的 Context
通过 this.context 访问 Context 的值

示例代码

import React from 'react';
// 创建Contextconst ThemeContext = React.createContext('light');
class MyClassComponent extends React.Component {  static contextType = ThemeContext; // 关键：静态属性赋值
  render() {    const theme = this.context; // 通过this.context访问    return 当前主题: {theme};  }}
// 在父组件中提供Contextfunction App() {  return (                );}

复制代码

2、使用 `Context.Consumer`（支持多个 Context）

步骤：

在类组件的 render 方法中，使用 `` 组件包裹
内部使用函数作为子元素（render prop 模式）

示例代码：

import React from 'react';
// 创建两个Contextconst ThemeContext = React.createContext('light');const UserContext = React.createContext('Guest');
class MyClassComponent extends React.Component {  render() {    return (      // 消费多个Context              {theme => (                      {user => (                              主题: {theme}, 用户: {user}                          )}                  )}          );  }}
// 在父组件中提供多个Contextfunction App() {  return (                              );}

复制代码

类组件与函数组件使用 Context 的主要区别

`useContext` 实现原理详解

useContext 的实现原理基于 React 的 上下文机制（Context） 和 订阅-发布模式，主要涉及三个核心环节：

1. Context 对象的内部结构

每个通过 createContext() 创建的 Context 对象包含以下关键属性：

const MyContext = React.createContext(defaultValue);// 内部结构：{  _currentValue: defaultValue,  // 当前值存储  _threaded: true,             // 标识当前渲染线程  Provider: { ... },           // Provider 组件  Consumer: { ... },           // Consumer 组件  _currentRenderer: null,      // 当前渲染器  _globalName: null,           // 全局名称  _subscribe: function() { ... } // 订阅函数}

复制代码

核心是 _currentValue (存储当前值) 和 _subscribe (管理订阅者链表)

2. 值读取与订阅机制

当调用 useContext(MyContext) 时：

function useContext(Context) {  // 1. 从 Context._currentValue 读取当前值  const value = readContext(Context);     // 2. 将当前组件添加到订阅链表  subscribeToContext(Context, currentlyRenderingFiber);    return value; // 返回上下文值}

复制代码

currentlyRenderingFiber 是 React 内部的一个全局变量，用于指向当前正在执行的函数组件所对应的 Fiber 节点。它的主要作用是在函数组件渲染过程中为 Hooks 提供访问当前组件状态的桥梁。

具体过程：

读取值：直接访问 Context._currentValue 获取最新值
建立订阅：将当前函数组件对应的 Fiber 节点添加到 Context 的订阅者链表
通过 currentlyRenderingFiber.dependencies 链表维护订阅关系
每个依赖项包含 context 指针和订阅状态

3. 更新触发流程

当 Provider 的值更新时：


// 1. 更新 Context._currentValue = newValue// 2. 遍历订阅者链表 (Context._subscribe)// 3. 标记所有订阅组件的 Fiber 节点为需要更新// 4. 触发重新渲染

复制代码

关键点：

批量更新：React 会合并多个 Context 更新，避免频繁渲染
精准更新：只更新订阅该 Context 的组件（通过 Fiber 依赖链）
默认值处理：无 Provider 时返回 createContext(defaultValue) 的默认值

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/b8abbf70cb2e6a982af94c764】。文章转载请联系作者。

老李说技术

关注

相信自己，能在技术的道路上走的更远！ 2025-10-25 加入

前阿里技术专家，现大前端技术负责人，专注大前端领域知识分享

发布

暂无评论

创作场景

React 中 useContext 的基本使用和原理解析

React 中 useContext 的使用方法

1. 创建 Context 对象

2. 使用 Provider 提供数据

3. 在后代组件中使用 useContext 消费数据

4. 完整代码示例

在类组建中，useContext 的使用方法

1、使用 static contextType（单一 Context 订阅）

2、使用 Context.Consumer（支持多个 Context）

类组件与函数组件使用 Context 的主要区别

useContext 实现原理详解

1. Context 对象的内部结构

2. 值读取与订阅机制

3. 更新触发流程

老李说技术

评论

1、使用 `static contextType`（单一 Context 订阅）

2、使用 `Context.Consumer`（支持多个 Context）

`useContext` 实现原理详解