当前位置: 首页 > news >正文

关于React.createContext全局注入的一些记录

一、React Context 原理

简单地说就是可以将一些数据注入到Context对象中,使其下辖的组件可以随时随地访问这些数据,省去了逐层传递的步骤。

相对于在组件里挖槽(比如{props.children}),使用Context应该更注重随时随地都可能有需求使用这些数据这个目的。

核心API:

  • React.createContext(defaultValue)
    创建Context对象,可传入defaultValue或undefined。                                                即:当某个组件订阅了Context但未匹配到Provider时,就会访问defaultValue值,当传入undefined时,defaultValue无效。(defaultValue永远不会发生改变。当 React 无法找到匹配的 provider 时,该值会被作为后备方案。)
  • Context.Provider 
    Context对象都会返回Provider组件,其下的组件会订阅Provider中的数据。Provider接收value属性,用于将value传递给消费组件,当value发生变化时所有消费组件都会重新渲染。

二、使用

// AppContext.js
import React from 'react';
const defaultValue = null
const AppContext = React.createContext(defaultValue);
export default AppContext;
// app.ts
import AppContext from './appContext';class App extends Component<any, any> {state: any = {baseConfig: {value: 123}}//要渲染的页面render() {return (<AppContext.Provider value={this.state.baseConfig}>{this.props.children}</AppContext.Provider>)}
}export default App
// 自组件使用
export function Component(props: any) {return <AppContext.Consumer>{(value) => <Customer_page_overview_data {...props} {...value} />}</AppContext.Consumer>
}

三、异步传递问题

异步获取的数据存储全局的context中,子组件中使用这个context的数据时,数据为空;

解决: 

componentDidUpdate方法里异步获取数据;

每次this.setState()都会触发componentDidUpdate这个方法。因此我们在componentDidUpdate 中使用 this.setState() 就会无限循环。所以我们使用if来进行控制。

// app.ts
import AppContext from './appContext';class App extends Component<any, any> {state: any = {baseConfig: {value: 123}}componentDidUpdate() {if (!this.state.baseConfig.value) {API_CONFIG.getLogo({queryParams: {var: "report.baseConfig.target"}}).then(baseConfig => {console.log(baseConfig, "-=-=--=-=-AppContext=-=-=-=")this.setState({baseConfig})})}}//要渲染的页面render() {return (<AppContext.Provider value={this.state.baseConfig}>{this.props.children}</AppContext.Provider>)}
}export default App

相关文章:

关于React.createContext全局注入的一些记录

一、React Context 原理 简单地说就是可以将一些数据注入到Context对象中&#xff0c;使其下辖的组件可以随时随地访问这些数据&#xff0c;省去了逐层传递的步骤。 相对于在组件里挖槽&#xff08;比如{props.children}&#xff09;&#xff0c;使用Context应该更注重随时随…...

在S/4HANA OP 1511中激活嵌入式分析的基本配置

大家好&#xff0c;在这篇博客中&#xff0c;我将讨论在 S/4HANA On-Premise 1511 版本中激活嵌入式分析的基本配置。本博客主要关注Fiori前端系统和S/4HANA后端系统的分离安装。让我们深入了解一下。 景观 前端系统 SAP Fiori for S/4HANA OP 1511 Bakend系统SAP S/4HANA后…...

好的提交 VS. 坏的提交 :Git 的最佳实践

在软件或网页开发的精彩世界中&#xff0c;版本控制是每个与其他开发者合作项目的开发者必备的工具。Git 是最常用的版本控制系统之一&#xff0c;它帮助开发者跟踪变更、有效地回到之前的状态&#xff0c;并在项目中进行团队协作。但是&#xff0c;Git 的工作只有在正确管理提…...

MySQL第4讲--图像化界面工具DataGrip介绍

文章目录 前言DataGrip的下载DataGrip安装DataGrip连接数据库DataGrip使用创建数据库创建表修改表 DataGrip中编写SQL语句操作数据库 前言 在第二讲MySQL第2讲–关系型数据库以及SQL语句分类之DDL数据库和表的操作和第三讲MySQL第3讲–数据类型和表的修改和删除的介绍当中所有的…...

Curl工具小记

curl 是一个非常强大且灵活的命令行工具&#xff0c;用于获取或发送数据&#xff0c;无需用户图形界面交互。它支持多种协议&#xff0c;并且可以在脚本中使用&#xff0c;以实现自动化任务。 基本介绍 curl 是 “Client URL” 的缩写&#xff0c;它是一个利用 URL 语法在命令…...

【C#语音文字互转】C#语音转文字(方法一)

Whisper.NET开源项目&#xff1a;https://github.com/sandrohanea/whisper.net/tree/main 一. 环境准备 在VS中安装 Whisper.net&#xff0c;在NuGet包管理器控制台中运行以下命令&#xff1a; Install-Package Whisper.net Install-Package Whisper.net.Runtime其中运行时包…...

基于Linux系统下的在线手机商城

项目背景 随着网络的发展&#xff0c;电子商务的兴起和普及使得消费者越来越倾向于通过互联网购买商品和服务&#xff0c;越来越多的传统零售商和新兴企业转向在线销售以满足消费者的需求&#xff0c;个成功的在线商城项目背景包括对市场需求、竞争环境、技术和平台选择、商业…...

Apache Kafka 事务详解

Apache Kafka 事务详解 Apache Kafka 是一个分布式流处理平台&#xff0c;主要用于实时数据的传输和处理。在现代的数据密集型应用中&#xff0c;事务性保证在数据传输和处理中的作用至关重要。本文将详细介绍 Kafka 的事务性支持&#xff0c;包括其基本概念、架构、使用方法以…...

Go语言 结构体

本文主要为Go语言 结构体介绍、语法、使用注意及其示例。 目录 结构体 语法 语法示例 语法说明 声明使用 创建并赋值 使用指针 使用注意 总结 结构体 C语言里面&#xff0c;我们可以使用typedef in MyInt。 在go语言中使用结构体来模拟类&#xff0c;使用type stru…...

数据结构(邓俊辉)学习笔记】词典 03—— 排解冲突(1)

文章目录 1. 一山二虎2. 泾渭分明3. 开放定址4. 线性试探5. 赖惰删除 1. 一山二虎 此前我们已经多次指出&#xff0c;对于需要动态维护的散列表冲突是不可避免的&#xff0c;无论你的散列函数设计的有多么精妙&#xff0c;因此我们不得不回答的第二个重要问题就是一旦发生冲突&…...

HTML5+CSS3-HTML5入门

1.web标准 W3C为web标准化做出了以下事项&#xff0c;主要包括结构&#xff0c;表现和行为。 结构用于对网页的信息进行分类和整理&#xff0c;使用技术包括HTML,XML,XHTML 表现指网页的外在样式&#xff0c;一般包括网页的版式&#xff0c;颜色&#xff0c;字体&#xff0c…...

谷粒商城实战笔记-138-商城业务-首页-渲染二级三级分类数据

本节的主要内容是在前一节的基础上&#xff0c;提供结构查询出所有的二级、三级分类数据。 一&#xff0c;构造响应体数据结构 后端返回给前端的数据结构是在开发详细设计中应该确定的内容。 分析前端需要的数据结构&#xff0c;后端要将所有一级分类包含的二级和三级分类信…...

git的基础用法

文章目录 前言关联仓库提交代码分支操作账号免密 前言 记录一下git的一些基础用法。 关联仓库 # 初始化 git init# 关联仓库 git remote add origin <仓库地址># 查看当前关联的仓库 git remote -v# 一次只能remote一个&#xff0c;要换需要先删原来的 git remote rem…...

常见中间件漏洞(四、Apache合集)

目录 四、Apache 4.1 CVE-2021-41773 漏洞简介 影响版本 环境搭建 漏洞复现 四、Apache 4.1 CVE-2021-41773 Apache HTTP Server 路径穿越漏洞 漏洞简介 该漏洞是由于Apache HTTP Server 2.4.49版本存在目录穿越漏洞,在路径穿越目录<Directory/>Require all gra…...

HCIE-学习笔记

动态授权加入的成员优先级高于静态绑定的成员&#xff1b; any组&#xff08;缺省&#xff09;&#xff1a;所有用户或资源&#xff0c;通常用来配置默认规则。any组只能做目的组&#xff0c;不支持配置为源组。 同一个安全组既可以与多条授权规则绑定来表示动态用户&#xff0…...

【计算机网络】性能指标-带宽和时延(MB、GB、KB、B、byte、bit、Mb/s、Gb/s、b/s等)学习

文章目录 1、单位换算MB、b/s1.1 在计算机领域&#xff0c;大写的B、K、M、G表示1.2 在通信领域&#xff0c;小写的k代表的是1000,不是1024&#xff0c;转换的时候要注意区分 2、带宽3、时延&#xff08;时间消耗&#xff09;4、时延带宽积5、往返时延RTT 1、单位换算MB、b/s …...

ANN(Approximate Nearest Neighbor)搜索和索引库到底是什么?

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ ANN&#xff08;Approximate Nearest Neighbor&#xff09;搜索&#xff1a;最近邻搜索是一种在大规模数据集中快速找到与给定查询数据点距离最近的点的算法。与传统的精确最近邻搜索算法相比&#xff…...

勒索软件、供应链攻击等带来的思考!

2023年勒索软件、供应链攻击、地缘政治冲突与黑客活动主义、国家黑客间谍与APT组织活动成为网络安全的热点话题&#xff0c;生成式人工智能技术的武器化更是给动荡的全球网络安全威胁态势增加了不确定性、不对称性和复杂性。 即将到来的2024年&#xff0c;随着网络犯罪的规模化…...

【Nuxt】自定义插件和生命周期

自定义插件 方式一&#xff1a; app.vue // 创建插件(在app.vue中创建全局可以使用 而在某个页面中创建只有该页面可以使用) // 方式一&#xff1a; const nuxtApp useNuxtApp(); nuxtApp.provide("formDate", () > {return "2023-12-12"; }) nuxtAp…...

MySQL的简单介绍

文章目录 数据库关系型数据库非关系型数据”数据库的概念和用途MySQL数据库服务器、数据库和表的关系数据库的创建和删除表创建表修改常见的数据类型和约束字符串类型日期和时间类型PRIMARY KEY使用AUTO_INCREMENT使用UNIQUE使用FOREIGN KEY使用 SQL语言基础SQL语言简介SQL分类…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...