复习基础知识,react原理

288 阅读2分钟

1、学习方法

1、理解场景/背景
2、定义、表现、文档
3、建立联系:构建属于自己的知识体系 抽象能力
4、总结、复盘

基础数据类型为什么不可变 var a = 10 a = 20 js 只有一种垃圾回收机制,垃圾回收器, 垃圾回收机制:周期性遍历内存空间

建立联系: 扫地机器人(建立联系)

react 源码设计思想

场景、背景: 
    页面不卡顿,浏览器、电脑硬件有关
1、什么是浏览器刷新率
      60Hz =1000/60 1秒中渲染60次~16.7ms 
      每次计算都要限制在16.7ms以内
      
      超过20ms 页面卡顿,
      
      这一轮周期 16.7ms, 假设时间20ms,
      1 2 3 4 5 6 7 8 9 10
      1   2   3   4   5
2、页面刷新率120HZ,会提高用户体验感?不会
     120HZ =1000/120 ~~8.几ms
     不会更流畅
     一次任务 在8ms内完成
      1     2     3      4
      掉帧更严重
3、如何选择性能较好的手机
      1、选择android手机,自适应刷新率,最省电
4、其他问题:
      1、手机长时间使用锂电池老化不可避免:换电池
      2、同一手机,页面显示不完全:手机屏幕分辨率

底层思路:

  1、渲染页面元素 渲染一个页面元素比较快、两个页面元素慢。。。
  大量元素渲染,100 页面元素,超出16.7ms 页面卡顿

react 底层原理:任务分配

  保证不卡顿,迎合刷新率的规则,
  1、 任务分配原理:首先把页面元素渲染 拆分成100个任务,react 把关键信息显示出来,根据标签信息显示,优先级高的标签渲染
  

任务调度

( 优先级队列,堆,小丁堆,大丁堆,

react 新版 模拟并发:进程,电脑一开始单线程,修改

react 最底层: 100ms 同一时间执行一个任务,交替执行,给人感觉是并发执行

react Fiber ->一个任务->一个元素的渲染->{tagname:'div',children:[],attr:''} )

栈顶元素 执行,函数调用栈

栈:函数调用栈,栈的思维,栈顶函数参与执行,js执行 队列: 堆: 链表:

下次课程:

函数执行上下文: 函数调用栈,栈: 作用域与作用域链: 执行上下文: 闭包: