Mini-React

jsx

jsx 是React中对于JavaScript的语法扩展,允许在JavaScript中去写类似于HTML的代码。使得开发者能够以一种更直观和声明式的方式去编写用户界面

vdom

vdom是React为了提高性能而去引入的一个虚拟的dom表示。
它是一个轻量级的 JavaScript 对象,用于描述真实 dom 树的结构。vdom 的核心思想是通过减少直接操作真实 dom 的次数来提高应用的渲染性能。

当react组件状态发生变化的时候,React会生成一个新的vdom树,与上一次的vdom树进行差异对比。并且找出实际发生变化的部分,并将这些变化去应用到真实的dom上,从而减少不必要的dom操作

我们写的jsx代码最终会被转换为JavaScript 对象,这些对象就是vdom的表示形式。有type,children,props等属性

createElement

React内部的一个方法。用于创建新的React元素,这个方法是jsx转换过程的一部分。当jsx代码被编译的时候,他会转换为React.createElement调用

const createTextNode = (text) => {return {type: TEXT_NODE,props: {nodeValue: text,children: []},}
}
const createElement = (type, props, ...children) => {return {type,props: {...props,children: children.map(child => {return typeof child === 'string' || typeof child === 'number' ? createTextNode(child) : child})}}
}

Render

将React元素渲染到DOM节点上的过程。负责将vdom转换成真实的DOM节点,并append到指定的容器中(根节点root)
执行过程:

  • 通过type来创建不同的dom节点
  • 遍历props给dom节点设置对应的attribute
  • 遍历children去递归的创建dom节点,设置熟悉。重复上面两步
  • 然后把创建好的dom节点append到父节点中
  • 最后append到根节点中,也就是我们定义好的root节点。

但是整个过程是递归的,且递归不可中断,如果页面层级过多会导致 js占用线程时间过程,影响页面的渲染

React15架构的缺点

采用了递归去渲染更新页面。由于递归执行,所以更新一旦开始,中途就无法中断,当层级很深的时候,就会产生卡顿

如何解决的?

在 React16 中,将递归不可中断的更新改为了异步可中断更新

Fiber

fiber 节点表示一个最小的可执行工作单元。也就是一种新的数据结构,保存了 tag key type stateNode 等相关信息

React Fiber通过分片 slicing 和优先级调度 priority scheduling 来解决递归不可中断的问题

需要改为异步可中断的更新后,之前的 vdom 的数据结构就不太行了,这里就引出了 fiber 架构。采用链表的形式来表示当前的 dom 树

通过链表的 child sibling return 维护形成了一颗 fiber 树,这样我们就可以通过指针明确的知道当前执行到哪个 fiber 节点,当浏览器空闲的时候就去执行

…待完善function 组件,useState useEffect部分

感谢崔大的mini-react课程,下面是B站地址
https://space.bilibili.com/175301983/

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

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

相关文章

推荐算法策略需求-rank model优化

1.pred_oobe (base) [rusxx]$ pwd /home/disk2/data/xx/icode/baidu/oxygen/rus-pipeline/pipeline-migrate/UserBaseActiveStatPipeline/his_session (base) [rusxx]$ sh test.sh 2. user_skill_history_dict_expt2包含userid [workxx]$ vim /home/work/xx/du-rus/du_rus_o…

Python 之 Flask 框架学习

毕业那会使用过这个轻量级的框架,最近再来回看一下,依赖相关的就不多说了,直接从例子开始。下面示例中的 html 模板,千万记得要放到 templates 目录下。 快速启动 hello world from flask import Flask, jsonify, url_forapp F…

Redis集群的方案

文章目录 主从同步哨兵模式 在Redis中提供的集群方案总共有三种:主从同步、哨兵模式、Redis分片集群 主从同步 主从解决的是高并发问题。 单个Redis节点的并发能力有限,要进一步提高Redis的并发能力,可以搭建主从集群,实现读写分…

【edge浏览器无法登录某些网站,以及迅雷插件无法生效的解决办法】

edge浏览器无法登录某些网站,以及迅雷插件无法生效的解决办法 edge浏览器无法登录某些网站,但chrome浏览器可以登录浏览器插件无法使用,比如迅雷如果重装插件重装浏览器重装迅雷后仍然出现问题 edge浏览器无法登录某些网站,但chro…

基于FPGA的SPI_FLASH程序设计

SPI_FLASH简介 spi_flash是一种通用存储器,也称为SPI NOR Flash或SPI Flash。它使用SPI(Serial Peripheral Interface)接口进行通信,可以通过串行方式读写数据。spi_flash的特点是工作电压低,体积小,读写速…

设计模式之旅:工厂模式全方位解析

简介 设计模式中与工厂模式相关的主要有三种,它们分别是: 简单工厂模式(Simple Factory):这不是GoF(四人帮,设计模式的开创者)定义的标准模式,但被广泛认为是工厂模式的…

【单片机家电产品学习记录--红外线】

单片机家电产品学习记录–红外线 红外手势驱动电路,(手势控制的LED灯) 原理 通过红外线对管,IC搭建的电路,实现灯模式转换。 手势控制灯模式转换,详细说明 转载 1《三色调光LED台灯电路》&#xff0c…

矩阵空间秩1矩阵小世界图

文章目录 1. 矩阵空间2. 微分方程3. 秩为1的矩阵4. 图 1. 矩阵空间 我们以3X3的矩阵空间 M 为例来说明相关情况。目前矩阵空间M中只关心两类计算,矩阵加法和矩阵数乘。 对称矩阵-子空间-有6个3X3的对称矩阵,所以为6维矩阵空间上三角矩阵-子空间-有6个3…

【Turtle】海龟先生

什么是编程 计算机只懂0和1这样的语言,可是我们不懂,当我们希望 计算要能帮我们做事情的时候,该怎么办呢? 我们需要一种更简便的方法告诉计算机要做什么,所以人类发明了编程语言 利用计算机编程语言,我们…

硬件了解 笔记

motherboard的高低端区别在哪里? 核心:从单核变成双核,多核(几核就是几个打工人) 多线程:6核本来对应6个线程,但是多线程就是说6核对应12个线程 频率 主频:平时打工的速度 睿频&…

iNeuOS工业互联网操作系统,“低代码”表单开发应用过程(一)

iNeuOS工业互联网操作系统,“低代码”表单开发应用过程(一) 目 录 1. 概述... 2 2. “低代码”表单开发应用过程... 2 1. 概述 iNeuOS工业互联网操作系统“表单设计”功能经过升级后,能够适用于更多应用场景&…

Altair® FluxMotor® 电机拓扑探索和多物理场优化

Altair FluxMotor 电机拓扑探索和多物理场优化 FluxMotor 致力于解决电机的整体设计问题。该软件工具可帮助工程师加快电机设计速度,在考虑多物理场约束条件的同时快速探究各种参数配置,并在几分钟内选出完善的可能。 FluxMotor 具有简单直观的使用界面…

美摄科技AI智能图像矫正解决方案

图像已经成为了企业传播信息、展示产品的重要媒介,在日常拍摄过程中,由于摄影技巧的限制和拍摄环境的复杂多变,许多企业面临着图像内容倾斜、构图效果不佳等挑战,这无疑给企业的形象展示和信息传递带来了不小的困扰。 美摄科技深…

Windows Edge浏览器兼容性问题诊断与修复策略详解

随着Microsoft Edge浏览器的持续迭代与更新,其性能与兼容性已得到了显著提升。然而,在面对互联网上纷繁复杂的网页内容时,仍有可能遇到兼容性问题。本文旨在探讨Edge浏览器在处理网页兼容性问题时的常见场景、原因分析及相应的解决方案&#…

索引下推(Index Condition Pushdown,简称 ICP)

Mysql可以分为Server层和存储引擎层 所以,最终进行I/O的是存储引擎对文件系统进行I/O操作 索引下推(Index Condition Pushdown,简称 ICP) 对应InnoDB,索引下推适用于非聚簇索引(二级索引)。 …

数据结构进阶篇 之【选择排序】详细讲解(选择排序,堆排序)

民以食为天,我以乐为先 嘴上来的嘘寒问暖,不如直接打笔巨款 一、选择排序 1.直接选择排序 SelectSort 1.1 基本思想 1.2 实现原理 1.3 代码实现 1.4 直接选择排序的特性总结 2.堆排序 HeapSort 跳转链接:数据结构 之 堆的应用 二、完…

26.活锁、饥饿锁

两个线程,相互改变了对方结束条件,导致两个线程不能结束。执行时间也都是一样,导致两个线程永远不会结束。 Slf4j public class LiveLockDemo {static volatile int count 10;public static void main(String[] args) {new Thread(() ->…

单片机中的RAM vs ROM

其实,单片机就是个小计算机。大计算机少不了的数据存储系统,单片机一样有,而且往往和CPU集成在一起,显得更加小巧灵活。 直到90年代初,国内容易得到的单片机是8031:不带存储器的芯片,要想工作&a…

FPGA高端项目:解码索尼IMX327 MIPI相机+图像缩放+视频拼接+HDMI输出,提供开发板+工程源码+技术支持

目录 1、前言免责声明 2、相关方案推荐本博主所有FPGA工程项目-->汇总目录我这里已有的 MIPI 编解码方案 3、本 MIPI CSI-RX IP 介绍4、个人 FPGA高端图像处理开发板简介5、详细设计方案设计原理框图IMX327 及其配置MIPI CSI RX图像 ISP 处理自研HLS图像缩放详解Video Mixer…

k8s小白的学习初体验

前言 有些时候的巧合让人匪夷所思,前两周刚刚尝试了一遍Docker操作,紧接着就收到好朋友说要学习k8s容器部署的建议,最近两周抽空看了一些关于k8s的知识,相关概念真的是太多了,概念本身是枯燥的,但是当概念…