react Api之createContext

1、作用:

createContext 是一个用于创建上下文(context)的 API。上下文可以让您在组件树中共享数据,而不必手动通过 props 层层传递。

2、使用方式:

createContext 函数接受一个初始值作为参数,该初始值将在组件树中没有匹配到对应的 Provider 时被使用。它返回一个包含 Provider 和 Consumer 组件的对象。

  • Provider 组件: 使用 Provider 组件将上下文的值传递给后代组件。Provider 组件需要包裹在组件树中,并通过 value 属性传递需要共享的数据。
  • Consumer 组件: 使用 Consumer 组件来访问由 Provider 提供的上下文值。Consumer 组件使用 render prop 模式,可以通过一个函数接收到上下文的值,并在函数体内进行处理。

3、示例:

javascript 复制代码
import React, { createContext } from 'react';

// 创建一个上下文对象
const MyContext = createContext();

// 父组件提供上下文值
function ParentComponent() {
  const contextValue = 'Hello from Context';

  return (
    <MyContext.Provider value={contextValue}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

// 子组件消费上下文值
function ChildComponent() {
  return (
    <MyContext.Consumer>
      {(value) => <div>{value}</div>}
    </MyContext.Consumer>
  );
}

// 渲染父组件
ReactDOM.render(<ParentComponent />, document.getElementById('root'));

在上述示例中,MyContext 成为了一个可供父组件和子组件使用的上下文对象。父组件 ParentComponent 使用 Provider 组件将值 'Hello from Context' 提供给后代组件。子组件 ChildComponent 使用 Consumer 组件来获取该值并进行渲染。

通过使用 createContext 和 Provider/Consumer 组件,React 的上下文功能可以实现跨组件传递数据,方便地共享数据而不需要手动逐层传递 props。这在一些场景下非常有用,例如全局主题、用户身份验证状态等。

建议参考react hooks useContext使用

相关推荐
十盒半价6 分钟前
React 牵手 Coze 工作流:打造高效开发魔法
react.js·coze·trae
OEC小胖胖10 分钟前
性能优化(一):时间分片(Time Slicing):让你的应用在高负载下“永不卡顿”的秘密
前端·javascript·性能优化·web
烛阴18 分钟前
ABS - Rhomb
前端·webgl
植物系青年18 分钟前
10+核心功能点!低代码平台实现不完全指南 🧭(下)
前端·低代码
植物系青年19 分钟前
10+核心功能点!低代码平台实现不完全指南 🧭(上)
前端·低代码
小小李程序员26 分钟前
JSON.parse解析大整数踩坑
开发语言·javascript·json
桑晒.35 分钟前
CSRF漏洞原理及利用
前端·web安全·网络安全·csrf
宋辰月39 分钟前
Vue2-VueRouter
开发语言·前端·javascript
徐小夕40 分钟前
再也不怕看不懂 GitHub 代码!这款AI开源项目,一键生成交互架构图
前端·算法·github
Antonio91541 分钟前
【音视频】WebRTC 开发环境搭建-Web端
前端·webrtc