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使用

相关推荐
万少4 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL10 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl0226 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang27 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景29 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼30 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿32 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再34 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55538 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录43 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css