React16源码: ConcurrentMode的使用及源码实现

ConcurrentMode

1 ) 概述

  • ConcurrentMode 是 React 16 出来的一个最令人振奋的功能
  • 在2018年年初是 Async Mode,在发布了16.6之后,名字进行了更新
  • 然后改成了 ConcurrentMode,中间的API有一个过渡的版本,后续会提到
  • 它其实是 React 16 之前已有的概念了
  • 其目标是让 React 的整体渲染过程能够进行一个优先级的排比
  • 并且让整体的一个渲染的过程是能够中断的
  • 它就可以进行一个任务的调度,提升 cpu 性能
    • 因为 js 是一个单线程的语言, 如果我们执行更新占用了非常长的时间
    • 比如,浏览器执行一些动画的渲染中间,被进程占用执行其他操作, 时间被拉长,动画就变得比较卡顿
    • 或者是我们在进行一些input的输入的时候,响应会比较的卡,因为这个时候 js 正在运行react的更新
  • 在这种时候,React 让我们能够去区分一些优先级比较高和比较低的任务
  • 在进行一个 React更新的过程当中,它优先执行优先级高的任务
  • 在等浏览器把这些优先级高的任务,执行完之后,它有空余的时间的时候,再来执行优先级较低的任务

2 ) 实例演示

// ConcurrentMode 以前叫做 unstable_ConcurrentMode // 这个就是上面说的 过渡 API
import React, { unstable_ConcurrentMode as ConcurrentMode } from 'react'; // react 16.6 版本
// import React, { ConcurrentMode } from 'react'; // react 16.7 版本
// 这个会强制执行某个更新操作时, 使用优先级最高方式进行更新
import { flushSync } from 'react-dom;
import './index.css'class Parent extends React.Component {state = {async: true,num: 1,length: 2000,}componentDidMount() {this.interval = setInterval(() => {this.updateNum()}, 200)}componentWillUnmount() {// 别忘了清除intervalif (this.interval) {clearInterval(this.interval)}}updateNum() {const newNum = this.state.num === 3 ? 0 : this.state.num + 1if (this.state.async) {this.setState({num: newNum,})} else {flushSync(() => {this.setState({num: newNum,})})}}render() {const children = []const { length, num, async } = this.statefor (let i = 0; i < length; i++) {children.push(<div className="item" key={i}>{num}</div>,)}return (<div className="main">async:{' '}<inputtype="checkbox"checked={async}onChange={() => flushSync(() => this.setState({ async: !async }))}/><div className="wrapper">{children}</div></div>)}
}export default () => (<ConcurrentMode><Parent /></ConcurrentMode>
)
  • 上面 unstable_ConcurrentModeConcurrentMode 的过渡版本
    • 在后续16.7 实验版本的源码中是这样判断的
       var enableStableConcurrentModeAPIS = true // 注意这里是 true// ... 中间省略很多代码if (enableStableConcurrentModeAPIS) {React.ConcurrentMode  = REACT_CONCURRENT_MODE_TYPE;React.Profiler = REACT_POFILER_TYPE;} else {React.unstable_ConcurrentMode  = REACT_CONCURRENT_MODE_TYPE;React.unstable_Profiler = REACT_POFILER_TYPE;}
      
  • 关于上面的 flashSync 这个API
    • 它会强制我们在执行某一个更新操作的时候,使用优先级最高的方式去进行一个更新
    • ConcurrentMode 有一个特性
      • 我们在一个子树当中渲染了 ConcurrentMode 之后
      • 它下面的所有的节点产生的更新,就是一个低优先级的更新
      • 上面的示例,把整体渲染都放在这个 ConcurrentMode 下面, 所以这个组件它产生的所有更新
      • 就是我们通过 setState 这种方式去创建的这种更新, 它都是处于一个低优先级的
  • 上面的示例,展示了低优先级和高优先级它的一个区别
    • 使用 flashSync 来提高整体的一个优先级
  • 上面示例程序渲染了有2千个节点
    • 每个节点里面的数字是一直在变的,在这个过程当中
    • 我们又给浏览器增加了一个持续性的动画,就是让整体的一个区域左右的移动
    • 动画的优先级明显是较高的
  • 主要关注 updateNum 这个函数的 if else 判断
  • 就是我们通过一个 checkbox 来切换 async 的情况
    • 当结果为 false 时,调用 flashSync,因为它是一个优先级较高的任务,强制立马更新掉
    • 效果就是: 数字变化特别快,但是动画运动就特别卡
  • 这就是 异步模式 (async mode) 和 同步模式(sync mode) 的一个本质的区别
    • 在 async mode 下面会区分优先级,让整体的动画能够看起来更流畅一点
    • 在 sync mode 下面,它没有一个优先级的区别,所以它们都是一起进行的
      • 在进行更新的时候,导致我们整个动画也会变得一卡一卡的感觉

3 )源码探究

在 React.js 中, 看一下 ConcurrentMode 的源码是什么

import {REACT_CONCURRENT_MODE_TYPE,REACT_FRAGMENT_TYPE,REACT_PROFILER_TYPE,REACT_STRICT_MODE_TYPE,REACT_SUSPENSE_TYPE,
} from 'shared/ReactSymbols';
// ... 省略其他
// 最后
if (enableStableConcurrentModeAPIs) {React.ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;React.Profiler = REACT_PROFILER_TYPE;
} else {React.unstable_ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;React.unstable_Profiler = REACT_PROFILER_TYPE;
}
  • 在这里面 ConcurrentMode 它等于的是一个常量,它是一个 REACT_CONCURRENT_MODE_TYPE
  • 是从 shared/ReactSymbols 文件中导入的一个类型,本质是一个 Symbol
    export const REACT_CONCURRENT_MODE_TYPE = hasSymbol? Symbol.for('react.concurrent_mode'): 0xeacf;
    
  • 我们自己写组件的时候,我们都知道里面会有特别多的一些东西,我们要写一些 state
    • 比如,业务逻辑 或者在 function component 里面至少渲染一些东西
    • 但是我们这个组件它就是一个简单的 Symbol,没有任何其他的东西
  • 目前,先不去探究它如何来承载其他组件的

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

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

相关文章

OpenCV-12绘制图像

OpenCV提供了许多绘制图像的API&#xff0c;可以在图像上绘制各种图形&#xff0c;例如直线&#xff0c;矩形&#xff0c;圆&#xff0c;椭圆等图形。 一、画直线 利用API line&#xff08;img, pt1, pt2, color, thickness, lineType, shift&#xff09;可以绘制直线。 其中…

玩转贝启科技BQ3588C开源鸿蒙系统开发板 —— 代码下载(1)

本文主要参考&#xff1a; BQ3588C_代码下载 1. 安装依赖工具 安装命令如下&#xff1a; sudo apt-get update && sudo apt-get install binutils git git-lfs gnupg flexbison gperf build-essential zip curl zlib1g-dev gcc-multilib g-multiliblibc6-dev-i386 l…

力扣题目学习笔记(OC + Swift)27.移除元素

移除元素 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出新…

【编译原理】期末预习做题向I

新的一年希望可以成为更好的人嘿嘿&#xff01; 这一篇基本就是把 up 讲的题都截了一遍然后加了点自己的笔记啥的 O.o &#xff08;不妥的话会删掉的 qwq&#xff0c;希望没事嘿嘿&#xff09; 来源&#xff1a;混子速成 I. 绪论 记住组成部分 II. 前后无关文法和语言 1.…

Python从入门到网络爬虫、自动化

可以创建C、C#、Python、Golang、Java、React、Node、Vue、PHP项目 创建Java项目 创建Python项目 简单if……else……语句 # 简单的if……else……语句 state True if state:print("状态正常") else:print("状态异常")# 复杂的if……elif……语句 score …

粤港澳个人数据跨境流动规则的理解

文章目录 前言一、港澳数据安全的相关背景二、港澳个人数据跨境流动指引三、香港个人资料跨境规则的梳理与解读在本文中主要做以下解读:四、澳门个人资料跨境规则的梳理与解读五、内地与港澳个人数据跨境监管规定比对1、保护目的2、保护对象和监管对象。3、出境活动和出境条件…

周记-20240101

记录一下最近的生活&#xff0c;做一下简单的梳理&#xff0c;具体详细的梳理等我目前的工作步入正轨 以后再开始好好地总结一下2023年的过往经历&#xff0c;总结过去&#xff0c;展望未来。计划一下未来的2024该怎么度过。 最近一阵子都忙着考试&#xff0c;然后从10号以后一…

一骑绝尘!维乐携手骑行侠客轻风逆旅带你解锁冬日逆旅

是逆风冬旅还是冻旅&#xff1f;冬日似乎都被骑友们默认做事应该闭关闭的时间了&#xff0c;空气中萧瑟的寒风仿佛是穿透我们的骨膜&#xff0c;当我还在路上瑟瑟发抖的时候&#xff0c;此时一位公路骑行侠正在开启他的冬日旅途~      以下是来自他的自诉&#xff1a;   …

saas 多租户系统数据隔离方案

关注WX公众号&#xff1a; commindtech77&#xff0c; 获得数据资产相关白皮书下载地址 1. 回复关键字&#xff1a;数据资源入表白皮书 下载 《2023数据资源入表白皮书》 2. 回复关键字&#xff1a;光大银行 下载 光大银行-《商业银行数据资产会计核算研究报告》 3. 回复关键字…

【STM32F103】SysTick系统定时器延时函数

SysTick SysTick是Cortex-M3内核中的一个外设&#xff0c;内嵌在NVIC中&#xff0c;叫系统定时器。 当处理器在调试期间被喊停时&#xff0c;SysTick也将暂停运作。 一共有四个寄存器&#xff0c;不过我们通常用前三个&#xff0c;不需要校准。下图出自《STM32F10xxx Cortex…

关于SIC 的Know-how

SiC的分类和用途 根据电阻率不同&#xff0c;SiC衬底晶片可分为导电型和半绝缘型。 SiC衬底晶片主要用来做成高压功率器件和高频功率器件。其中&#xff0c;导电型SiC衬底晶片经过SiC外延后&#xff08;SiC基SiC外延片&#xff09;&#xff0c;主要应用于制造耐高温、耐高压的…

72内网安全-域横向CSMSF联动及应急响应知识

拿到才行&#xff0c;拿不到就是多余的 案例一MSF&CobaltStrike 联动 Shell 有一些功能可能cs或者msf强大一些&#xff0c;他们两个可以相互调用&#xff0c;在真实情况下也是可以cs和msf同时启动的&#xff0c; cs移交给msf .创建Foreign监听器 “Listeners”“Add”…

蓝桥杯一维差分 | 算法基础

⭐简单说两句⭐ ✨ 正在努力的小新~ &#x1f496; 超级爱分享&#xff0c;分享各种有趣干货&#xff01; &#x1f469;‍&#x1f4bb; 提供&#xff1a;模拟面试 | 简历诊断 | 独家简历模板 &#x1f308; 感谢关注&#xff0c;关注了你就是我的超级粉丝啦&#xff01; &…

Python-docx 深入word源码 带有序号的段落无法设置段后、段前距离、间距等段落属性

如果使用p doc.add_paragraph(内容, styleList Number)来创建序号段落&#xff0c;会发现设置序号段落之间的段前、段后以及段落间距无法生效。后来将docx库生成的word文档打开后发现段落的设置出现问题&#xff0c;如下图红框所示&#xff0c;将该选项去掉即可使段落间距属性…

linux上安装python3.7

1.在liunx上安装python运行环境 yum -y install gcc yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db4-devel libpcap-devel xz-devel libffi-devel 2.进入到安装目录 cd /usr/local/ 3.下载python…

【AIGC-图片生成视频系列-4】DreamTuner:单张图像足以进行主题驱动生成

目录 一. 项目概述 问题&#xff1a; 解决&#xff1a; 二. 方法详解 a) 整体结构 b) 自主题注意力 三. 文本控制的动漫角色驱动图像生成的结果 四. 文本控制的自然图像驱动图像生成的结果 五. 姿势控制角色驱动图像生成的结果 2023年的最后一天&#xff0c;发个文记录…

基于Java影院影片管理系统

基于Java影院影片管理系统 功能需求 1、影片信息管理&#xff1a;系统能够添加、删除、修改和查询影片的信息&#xff0c;包括影片名称、导演、演员、类型、简介等。 2、座位管理&#xff1a;系统能够添加、删除、修改和查询影院的座位信息&#xff0c;包括座位号、座位类型…

迈向通用异常检测和理解:大规模视觉语言模型(GPT-4V)率先推出

PAPERCODEhttps://arxiv.org/pdf/2311.02782.pdfhttps://github.com/caoyunkang/GPT4V-for-Generic-Anomaly-Detection 图1 GPT-4V在多模态多任务异常检测中的综合评估 在这项研究中&#xff0c;我们在多模态异常检测的背景下对GPT-4V进行了全面评估。我们考虑了四种模式&#…

BikeDNA(二) OSM数据的内在分析1

BikeDNA&#xff08;二&#xff09; OSM数据的内在分析1 该笔记本分析给定区域的 OSM 自行车基础设施数据的质量。 质量评估是“内在的”&#xff0c;即仅基于一个输入数据集&#xff0c;而不使用外部信息。 对于将 OSM 数据与用户提供的参考数据集进行比较的外在质量评估&…

运维面试笔试题

目录 shell脚本 nginx 数据库mysql k8s(kubernetes) 安全与防护 网络TCP/IP shell脚本 1 通过正则表达式匹配文本