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

react理念(二)

react-fiber

虚拟dom在react16中称为fiber。

起源

在react15之前,协调器采用递归的方式来创建dom,递归的过程是不能中断的,如果组件书的层级很深,递归会占用线程很多时间,造成卡顿。为了解决这个问题,react16将递归的无法中断的更新重构为异步的可中断的更新。

fiber

  1. 作为架构来说,react15的协调器使用递归的方式执行,数据保存在递归调用栈中,被称为stack reconciler, 在react16中,被成为fiber reconciber。
  2. 作为静态的数据结构来说,每个fiber节点对应的react元素,保存了组件的类型,对应的dom节点等信息。
  3. 作为动态的工作单元来说,每个fiber节点保存了本次更新中该组件改变的状态,要执行的工作。

结构

每个fiber节点有对应的react element,多个fiber节点会形成树。

// 指向父级fiber节点
this.return = null
// 指向子fiber节点
this.child = null
// 指向右边的第一个兄弟fiber节点
this.sibling = null

在这里插入图片描述


http://www.kler.cn/news/343692.html

相关文章:

  • C++面试速通宝典——18
  • 电汽车充电革命:充电桩的过去现在与未来
  • Electron-Vue基础初探
  • 掌握Razor语法:构建动态ASP.NET Core网页的基石
  • 成像基础 -- 景深计算
  • 腾讯云Android 相关
  • 苹果正式宣布:iPhone全面开放近场通信(Near Field Communication,简称NFC)【使用安全元件提供app内NFC数据交换功能】
  • JAVA接入GPT开发
  • 计算机毕业设计 | SSM 旅游网站后台管理系统(附源码)
  • YOLO11改进 | 注意力机制 | 结合静态和动态上下文信息的注意力机制
  • 基于AnolisOS 8.6安装SNMPTT
  • K210 Maxi bit 适合于新手的各种教程文章(保姆级教程)
  • ansible学习之ansible-vault
  • QD1-P19 HTML 总结
  • 云计算第四阶段 CLOUD2周目 01-03
  • 【数据结构-栈】力扣155. 最小栈
  • react中的重定向Redirect
  • windows C++-在启用 COM 的应用程序中使用并发(一)
  • 为什么云服务器加了安全组端口还是无法访问?
  • vscode gitlens收费破解