React Context

Context

https://juejin.cn/post/7244838033454727227?searchId=202404012120436CD549D66BBD6C542177

context 提供了一个无需为每层组件手动添加 props, 就能在组件树间进行数据传递的方法

React 中数据通过 props 属性自上而下(由父及子)进行传递,但此种用法对于某些类型的属性而言极其繁琐(UI 主题,地区偏好),这些属性时应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式,而不必显示的通过组件树逐层传递 props

在这里插入图片描述

  1. 创建 context

  2. 使用 context 的 Provider 进行包裹

  3. 使用 contextType 进行接收,this.context 读取

const ThemeContext = React.createContext('light');class App extends React.Component {render() {return (<ThemeContext.Provider value="dark"><Toolbar /></hemeContext.Provider>)}}function Toolbar() {return (<div><ThemeButton /></div>)
}class ThemeButton extends React.Component {
// static contextType = ThemeContextreturn <Button theme={this.context} />
}
ThemedButton.contectType = ThemeContext
function ThemedButton() {return (<ThemeContext.Consumer>{(value) => <button>{value}</button>}</ThemeContext.Consumer>);
}

context 用于不同层级的组件需要访问同样的数据。使得组件的复用性变差

如果只是想避免层层传递的一些属性,可以使用component composition

  • 将组件本身作为 props 传递下去
  • 这种对组件的控制减少了应用中需要传递的 props 数量,在很多场景下会使得代码更加干净,但是并不适用于每一个场景,这种将逻辑提升到组件树的更高层次会使得高层组件变得更加复杂,并且会强行将底层组件适应这样的样式

API

React.createContext

const MyContext = React.createContext(defaultValue);

创建一个 Context 对象,当 React 渲染一个订阅了这个 Context 对象的组件,这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值

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

Context.Provider

<MyContext.Provider value="" />

每个 Context 对象都会返回一个 Provider React 组件,它允许消费组件订阅 context 的变化

Provider 接收一个 value 属性,传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。多个 Provider 可以嵌套使用,里层的会覆盖外层的数据

当 Provider 的 value 值发生变化时,它内部的所有消费组件都会重新渲染。从 Provider 到其内部 consumer 组件(contextType, useContext)的传播不受制于 shouldComponentUpdate 函数,因此当 consumer 组件在其组件跳过更新的情况下也能更新。

生产消费者模型

组件只要定义了 contextType, 就是消费者,消费者可以订阅生产者,消费者可以随时响应状态的变化

context 可以无视中间组件的渲染,依然可以响应生产者数据的变化

通过新旧值检测来确定变化,使用了和 Object.is 相同的算法

=0 === +0 // true
Object.is(-0, +0) // false
注意点
  • context 会根据引用标识来决定何时进行渲染(本质是 value 属性值的比较)
  • 当 provider 的父组件进行重渲染时,可能会在 consumers 组件中触发意外的渲染
  • 当每一次 Provider 重渲染时,由于 value 属性总是被赋值为新的对象,以下的代码会重新渲染所有的 consumer 组件
class App extends React.Component {render() {return (<MyContext.Provider value={{ something: "something" }}><Toolbar /></MyContext.Provider>);}
}
  • 为了防止这种情况,将 value 状态提升到父节点的 state 里
class App extends React.Component {constructor(props) {super(props);this.state = {value: { something: "something" },};}render() {return (<MyContext.Provider value={{ something: "something" }}><Toolbar /></MyContext.Provider>);}
}
原理
  1. 将初始值存储在 context._currentValue
  2. 创建 Context.Provider 和 Context.Consumer 对应的 ReactElement 对象

在 fiber 树渲染时,通过不同的 workInProgress.tag 处理 Context.Provider 和 Context.Consumer 类型的节点。

在 React 中提供了 3 种消费 Context 的方式

  1. 直接使用 Context.Consumer 组件(也就是上面 createContext 时创建的 Consumer)
  2. 类组件中,可以通过静态属性 contextType 消费 Context
  3. 函数组件中,可以通过 useContext 消费 Context

这三种方式内部都会调用 prepareToReadContext 和 readContext 处理 Context。prepareToReadContext 中主要是重置全局变量为 readContext 做准备。

readContext 的核心逻辑:

  1. 构建 contextItem 并添加到 workInProgress.dependencies 链表(contextItem 中保存了对当前 context 的引用,这样在后续更新时,就可以判断当前 fiber 是否依赖了 context ,从而判断是否需要 re-render)
  2. 返回对应 context 的 _currentValue 值

更新 Context

当触发 Context.Provider 的 re-render 时,重新走 updateContextProvider 中更新的逻辑

核心逻辑:

  1. 从 ContextProvider 的节点出发,向下查找所有 fiber.dependencies 依赖当前 Context 的节点
  2. 找到消费节点时,从当前节点出发,向上回溯标记父节点 fiber.childLanes,标识其子节点需要更新,从而保证了所有消费 3. 了该 Context 的子节点都会被重新渲染,实现了 Context 的更新
总结

在消费阶段,消费者通过 readContext 获取最新状态,并通过 fiber 关联当前 Context
在更新阶段,从 ContextProvider 节点出发查找所有消费了该 context 的节点

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/6084.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Matlab|二阶锥松弛在配电网最优潮流计算中的应用

目录 一、主要内容 二、部分代码 三、程序代码 四、下载链接 一、主要内容 最优潮流计算是电网规划、优化运行的重要基础。首先建立了配电网全天有功损耗最小化的最优潮流计算模型&#xff1b;其次结合辐射型配电网潮流特点建立支路潮流约束&#xff0c;并考虑配电网中的可…

产品经理的产品思维

正确的思维 1&#xff1a;解决谁的&#xff0c;2&#xff1a;什么问题&#xff0c;3&#xff1a;用什么方法 错误的思维 技术转型的产品经理&#xff0c;接到一个需求&#xff0c;下意思里会想&#xff1a;用什么方法解决。 思维解读 解决谁的 即有哪些干系人&#xff0c…

macOS sonoma 14.4.1编译JDK 12

macOS sonoma 14.4.1编译JDK 12 环境参考文档开始简述问题心路历程着手解决最终解决(前面有点啰嗦了&#xff0c;可以直接看这里) 记录一次靠自己看代码解决问题的经历(总之就是非常开心)。 首先&#xff0c;先diss一下bing&#xff0c;我差一点就放弃了。 环境 macOS sonom…

git 子模块

git config -f .gitmodules submodule xxx xxx.git git submodule sync 删除&#xff1a; git submodule deinit <name_of_submodule> git rm -f <name_of_submodule> rm -rf .git/modules/<name_of_submodule> git commit -m “Deleted submodule xy” 重…

Java面试题:解释synchronized和java.util.concurrent包中的Lock有什么区别?

在Java中&#xff0c;synchronized和java.util.concurrent包中的Lock都是用于实现线程同步的机制&#xff0c;但它们之间存在一些关键的区别&#xff1a; 使用方式&#xff1a; synchronized是Java的一个关键字&#xff0c;可以用于修饰方法或者代码块&#xff0c;是一种内置的…

商场数据库项目MySQL实战(1——44)

我们在学习了MySQL基础语句后&#xff0c;终于迎来了第一次实战项目。 此次项目包含了88张商场可能用到的数据库表单&#xff0c;以便于商场的日常运行&#xff0c;并记录商场的各项数据。 通过表单的设计和建立&#xff0c;商城项目可以有效地管理用户信息、商品信息、订单和…

[力扣]——125.验证回文串

class Solution {public static boolean isValidChar(char ch){if((ch > a && ch < z) ||(ch > 0 && ch < 9)){return true;}return false;}public boolean isPalindrome(String s) {// 将大小写统一起来s s.toLowerCase();int left 0, right s…

vulnhub靶场之FunBox-2

一.环境搭建 1.靶场描述 Boot2Root ! This can be a real life scenario if rockies becomes admins. Easy going in round about 15 mins. Bit more, if you are find and stuck in the rabbit-hole first. This VM is created/tested with Virtualbox. Maybe it works with…

Stable Diffusion部署到Windows的详细教程

Stable Diffusion是一种文本到图像的潜在扩散模型,它可以从文本描述中生成高质量的图像。在Windows系统上部署Stable Diffusion,可以方便地利用这一功能进行创作或研究。本教程将指导你完成Stable Diffusion在Windows上的部署过程。 一、环境准备 安装Python:首先,确保你的…

百面算法工程师 | 支持向量机——SVM

文章目录 15.1 SVM15.2 SVM原理15.3 SVM解决问题的类型15.4 核函数的作用以及特点15.5 核函数的表达式15.6 SVM为什么引入对偶问题15.7 SVM使用SGD及步骤15.8 为什么SVM对缺失数据敏感15.9 SVM怎么防止过拟合 欢迎大家订阅我的专栏一起学习共同进步 祝大家早日拿到offer&#x…

利用亚马逊云科技GenAI企业助手Amazon Q Business构建企业代码开发知识库

2024年五一节假日的前一天&#xff0c;亚马逊云科技正式重磅发布了云计算行业期待已久的服务——Amazon Q Business。Amazon Q Business是专为企业用户打造的一个开箱即用的完善而强大企业GenAI助手。企业用户只需要将Amazon Q Business连接到现有的企业内部数据源&#xff0c;…

《人大金仓数据库》未来发展的展望

《人大金仓数据库》作为中国社会科学院经济研究所主办的重要数据平台&#xff0c;具有广泛的学术影响力和社会价值。未来&#xff0c;随着信息技术的不断发展和应用场景的不断拓展&#xff0c;人大金仓数据库将迎来更加广阔的发展空间和机遇。本文将对《人大金仓数据库》未来发…

linux安装opencv

先从官网下载源码 https://opencv.org/releases/ 然后解压缩 cd opencv-x.x.x在此路径下新建一个编译目录build mkdir build cd build然后进行编译 cmake ..然后 make -j4报错 [ 42%] Linking CXX shared library ../../lib/libopencv_dnn.so [ 42%] Built target opencv_…

小程序地理位置接口权限直接抄作业

小程序地理位置接口有什么功能&#xff1f; 随着小程序生态的发展&#xff0c;越来越多的小程序开发者会通过官方提供的自带接口来给用户提供便捷的服务。但是当涉及到地理位置接口时&#xff0c;却经常遇到申请驳回的问题&#xff0c;反复修改也无法通过&#xff0c;给的理由也…

【自研网关系列】过滤器链 -- 限流过滤器

&#x1f308;Yu-Gateway&#xff1a;&#xff1a;基于 Netty 构建的自研 API 网关&#xff0c;采用 Java 原生实现&#xff0c;整合 Nacos 作为注册配置中心。其设计目标是为微服务架构提供高性能、可扩展的统一入口和基础设施&#xff0c;承载请求路由、安全控制、流量治理等…

ESP32-C3模组上跑通MQTT(1)

本文内容参考&#xff1a; 《ESP32-C3 物联网工程开发实战》 特此致谢&#xff01; 一、远程控制的介绍 什么是远程控制&#xff1f;顾名思义&#xff0c;远程控制就是远距离控制&#xff0c;是指控制设备&#xff08;如智能手机、计算机等网络设备&#xff09;通过广域网控制…

DLNA源码分析之render设备注册

1&#xff0c;概述 DLNA设备、服务的注册及发现&#xff08;依赖开源库cling&#xff09;&#xff0c;DLNA中设备的注册、发现主要基于UPNP协议实现&#xff0c;这是微软推行的一个标准。Upnp最大的愿景是希望任何设备只要一接入网络&#xff0c;所有网上的设备马上就能知道有新…

FIFO Generate IP核使用——FIFO写操作详解及Status Flags页配置

本文介绍了FIFO的写操作及Status Flags页的配置信息。 1 FIFO 写入操作 当FIFO的写入使能&#xff08;write enable&#xff09;被置位&#xff0c;并且FIFO未满时&#xff0c;数据会从输入总线&#xff08;din&#xff09;被添加到FIFO中&#xff0c;并且写入确认&#xff0…

Mac环境下ollama部署和体验

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 关于ollama ollama和LLM&#xff08;大型语言模型&#xff09;的关系&#xff0c;类似于docker和镜像&#xff0c;可以在ollama服务中管理和运行各种LLM&…

逻辑漏洞:支付逻辑漏洞

目录 1、直接修改商品的价格 2、修改支付状态 3、修改商品数量 4、另类支付 5、修改支付接口 6、重复支付 7、最小支付和最大支付 8、越权支付 9、无线次试用 10、线程并发问题 前两天学习了逻辑漏洞中的越权漏洞&#xff0c;今天开始学习支付逻辑漏洞&#xff0c;这…