React Context：贯穿React应用的共享状态线

天狗精灵2024-07-29 18:23

在前端开发中，提到context,我们最先想到的或许是"执行上下文"。事实上，在前端开发中，context的含义有多个点：

  1. Execution Context（执行上下文） ：在 JavaScript 中，每段代码在执行时都处于一个执行上下文中。这个上下文包含了变量对象、作用域链、this 指向等信息。JavaScript 中有全局执行上下文和函数执行上下文，它们决定了变量和函数的可访问性。
  2. This 指向 ：在 JavaScript 中，函数的执行上下文决定了 this 关键字的指向。this 指向当前执行代码的对象，它的值取决于函数被调用的方式。
  3. 作用域链：执行上下文中的作用域链决定了函数可以访问哪些变量和函数。
  4. React Context：在 React 应用中，"context" 是一种特殊的全局状态管理机制。它允许你在组件树中传递数据，而不需要手动逐层传递 props。
  5. ...

既然是在React.js专栏中，本篇文章要讲的就是React Context。

React Context有什么用

上文提到：

在 React 应用中，"context" 是一种特殊的全局状态管理机制。它允许你在组件树中传递数据，而不需要手动逐层传递 props。

在 React 开发中，如果不使用状态管理工具和context，数据的传递通常是通过 props 属性进行的，即将数据通过 UI 树显式传递到使用它的组件。

如上图，如果组件2-1想要使用组件1-1的数据，由于是单项数据流，数据需要状态提升 到App组件，然后通过props一层层传递。

然而，这种方式增加了组件之间的耦合性，降低组件的可复用性。在组件树比较深或者需要在多个层级之间传递相同数据时会显得非常繁琐和冗余。

为了简化跨组件传递数据的过程，React 在16.3 版本引入了 Context API。React Context 是 React 提供的原生机制，用于跨组件传递数据。

Context为整个组件树提供数据，Context 会穿过中间的任何组件。官网图示：

说到React中的状态管理，第一个想到的就是redux。既然有了redux，为什么要学context?

事实上，React Redux 的实现是基于 React Context 的。React Redux 在内部利用了 React 的 Context API 来将 Redux 的 Store 提供给整个应用中的组件。

下面，我们来看context的具体使用。

context的使用

官方文档：使用 Context 深层传递参数 -- React 中文文档

1. 创建context对象------React.createContext

js 复制代码 
// context.js
import React from 'react';
export const MyContext = React.createContext();

React.createContext()创建了一个上下文对象，该对象提供了Provider(提供者)和Consumer(消费者）。

另外，在创建context的时候可以传入参数作为默认值，这个我们到后面再说。

2. 提供数据的组件------Context.Provider

jsx 复制代码 
// App.jsx
import SubComponent from "./components/SubComponent";
import { MyContext } from "./context";
import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  return (
    // 这里的value将后面的数据放入到上下文环境中
    <MyContext.Provider value={{ count, setCount, name: '张三' }}>
    {/*  Provider 内部的组件树 */} 
        <SubComponent />
    </MyContext.Provider>
  );
}

export default App;

SubComponent组件中有一些子组件：

js 复制代码 
import React from 'react';
import Child1 from "./Child1";
import Child2 from "./Child2";
import Child3 from "./Child3";

export default function SubComponent() {
  return (
    <div>
      SubComponent
      <Child1 />
      <Child2 />
      <Child3 />
    </div>
  );
}

接下来我们就要在这些子组件中使用Provider提供的数据。

3. 消费数据------Context.Consumer、useContext

想要使用Context的数据，可以有两种方式。

第一种：useContext （推荐）

React 16.8 之后，引入了 Hooks， useContext 提供了一种更简洁的方式来消费 Context。该 Hook 接收一个由 React.createContext API 创建的上下文对象，并返回该 context 的当前值。

jsx 复制代码 
// Child1.jsx
import { useContext } from 'react';
import { MyContext } from "../context"

export default function ChildCom4() {

  const { count, setCount, name } = useContext(MyContext);
  return (
    <div style={{ border: '1px solid',  width: "200px",}}>
      Child1
      <div>count:{count}</div>
      <button onClick={() => setCount(count + 1)}>增加</button>
      <div>name:{name}</div>
    </div>
  );
}

运行，可以看到在child1中可以获取到Provider组件中的value,并且能使用传递过来的方法。

第二种：Context.Consumer

这是在useContext之前的老方法。Consumer 是用来消费数据的组件，即订阅指定 Context 的变化，并在变化发生时重新渲染其内部的子组件。

其基本结构是通过一个函数作为其子元素（children）来订阅 Context 的值。��个函数接收当前 Context 的值作为其唯一的参数，并返回一个 React 元素。例如：

js 复制代码 
<MyContext.Consumer>
  {value => /* 根据 value 做一些操作 */}
</MyContext.Consumer>

示例：

js 复制代码 
import React from 'react';
import { MyContext } from "../context";


export default function ChildCom2() {
  return (
  // Consumer从上下文中读取数据
    <MyContext.Consumer>
      {(context) => (
        <div style={{ border: '1px solid', width: "200px" }} >
          Child2
          <div>count:{context.count}</div>
          <button onClick={() => context.setCount(context.count + 1)}>增加</button>
          <div>name:{context.name}</div>
        </div>
      )}
    </MyContext.Consumer>
  );
}

运行，可以看到这样的效果和useContext是一样的。

class组件可使用contextType

以上两种方法都可用于函数组件。class组件可以像以上第二个示例一样使用Consumer组件，也可以使用静态属性 contextType。使用很简单，就是把Context 对象赋值给挂载在 class 上的 contextType 属性。

js 复制代码 
export default class Child2 extends Component {
  // 指定 contextType 读取当前的 context对象
  static contextType = MyContext;

  render() {
     return (
        <div>
           <button onClick={() => this.context.setCount(this.context.count + 1)}>增加</button>
             <div>count:{this.context.count}</div>
        </div>
     )
  }
}

进阶使用

1. 使用多个Context 上下文环境

在刚才的context.js文件中再创建一个context:

js 复制代码 
import React from "react";

export const MyContext = React.createContext(); 
export const MyContext2 = React.createContext();

使用Provider提供数据：

js 复制代码 
import SubComponent from "./components/SubComponent";
import { MyContext, MyContext2 } from "./context";
import { useState } from "react";

function App() {
  return (
    <MyContext.Provider value={{ name: '张三' }}>
        <MyContext2.Provider value={{ age: 18 }}>
            <SubComponent />
        </MyContext2.Provider>
    </MyContext.Provider>
  );
}

export default App;

消费数据：

js 复制代码 
// Child3.jsx
import { useContext } from 'react';
import { MyContext, MyContext2 } from "../context"

export default function ChildCom4() {

  const { name } = useContext(MyContext);
  const { age } = useContext(MyContext2);
  return (
      <div>name:{name},age: {age}</div>
  );
}

如果是使用Consumer组件消费数据，需要进行嵌套。

jsx 复制代码 
<MyContext.Consumer>
    {(context) => {
        return (
            <MyContext2.Consumer>
                {(context) => (
                    <div>
                         {/* 如果两个Provider传入了同样的变量名name, 这里的context取到的是最近的context中的数据 */}
                        <div>name:{context.name}</div>
                    </div>
                )}
            </MyContext2.Consumer>
        )
    }}
</MyContext.Consumer>

2. Context设置默认值

上文在在创建context时提到，createContext可以传入参数作为默认值。虽然好像不是很有用，因为它是不变的。

js 复制代码 
const MyContext = React.createContext(defaultValue);

注意：只有 当组件所处的树中没有匹配到 Provider 时，其 defaultValue 参数才会生效。此默认值有助于在不使用 Provider 包装组件 的情况下对组件进行测试。注意：将 undefined 传递给 Provider 的 value 时，消费组件的 defaultValue 不会生效。

还是用刚才的例子演示：

js 复制代码 
const MyContext = React.createContext({
  name: "zhangsan",
  age: 18,
});

不需要Provider提供数据：

js 复制代码 
// App.jsx
import SubComponent from "./components/SubComponent";
import { MyContext } from "./context";
import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  return <SubComponent />
}

export default App;

// SubComponent.jsx
import React from 'react';
import Child1 from "./Child1";

export default function SubComponent() {
  return (
    <div>
      SubComponent
      <Child1 />
    </div>
  );
}

使用数据：

js 复制代码 
import { useContext } from 'react';
import { MyContext } from "../context"

function ChildCom4() {
  const { name, age } = useContext(MyContext);
  return (
    <div style={{ border: '1px solid', width: "200px"}} >
      Child1
      <div>name:{name}</div>
      <div>age:{age}</div>
    </div>
  );
}

export default Child1;

运行，可以看到是能得到数据的。

注意事项

由上文可见，context看起来很强大，但是我们还是要避免过度使用context。

  • 适度使用 ：Context主要适用于全局数据或多个组件需要共享的状态管理，而不是用来替代组件通信的所有 props。在使用 context 之前，先试试传递 props 或者将 JSX 作为 children 传递。
  • 性能考虑：Context 的更新会触发依赖它的所有组件重新渲染，因此在设计时要注意避免不必要的 Context 更新。
  • 结构清晰：合理组织 Context 的提供者和消费者，确保代码结构清晰易懂，避免 Context 的嵌套过深或使用过于复杂。

context的使用场景

  1. 全局数据管理：当多个组件需要访问相同的数据时，可以将这些数据放在 Context 中，所有子组件可以直接访问这些数据，而不需要通过 props 层层传递。

  2. 主题设置：如果你的应用需要支持多种主题（比如暗黑模式和正常模式），可以将当前主题状态存储在 Context 中，然后所有受主题影响的组件可以订阅这个 Context。

  3. 用户认证状态：当需要在多个地方显示用户的认证状态（比如登录状态），可以将用户认证信息存储在 Context 中，然后所有需要显示或根据用户状态变化而变化的组件都可以从 Context 中读取这些信息。

  4. 多语言支持：如果你的应用需要多语言支持，可以将当前语言设置存储在 Context 中，然后所有需要显示文本的组件都可以从 Context 中获取当前语言的文本。

  5. 数据缓存：在某些情况下，如果你需要缓存一些数据以供应用的不同部分使用，可以使用 Context 来存储这些数据，以确保应用中各个组件共享相同的缓存数据。

当然，在我们的应用中，一般会结合使用Context和其他状态管理解决方案，如Redux或MobX，以满足不同的需求。

相关推荐
崔庆才丨静觅5 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60616 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了6 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅6 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅6 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅7 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment7 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅7 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊7 小时前
jwt介绍
前端
爱敲代码的小鱼7 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示