React原理笔记

快速响应前端UI #

• cpu瓶颈，concurrent mode ，时间切片
• IO瓶颈，suspense、useDeferedValue

react 15 #

• reconciler协调器，find diff DOM
  • 递归更新，可能导致卡顿
    • diff DOM约定
      • 跨级移动少，可以忽略不计
      • 相同类型的组件生产相似的结构，不同类型的组件生成不同的结构
      • 同一级别的节点可以用key区分不同
    • diff过程
      • tree diff
      • component diff
      • node diff
• render， update dom
  • reconcile之后立即render，如果中断reconcile，会导致此次render不完整

react 16 #

• schedule,调度器，高优先级优先reconcile
  • 判断浏览器是否有时间执行JS，独立实现比requestIdleCallback更稳定的调度
• reconciler
  • 变成循环结构，直到处理完diff dom
  • 通过shouldYield（调度器提供）判断是否暂停
  • reconcile中间会给每个diff dom 打上标记，全完成后再触发render
• render
  • 根据reconcile的标记更新render

fiber #

• hooks
  • 代数效应，函数式变成，纯函数，可以像公式一样带入带出，输入依赖于输入
• fiber node
  • node info
  • process unit info
• 双缓存
  • WorkInProgressFiber.alternate = currentFiber
  • currentFiber.alternate = workInProgressFiber

JSX #

• 描述组件内容的结构，编译成React.creatElement函数
• 基于node基本模型{type, properties, children}

lane模型 #

• 32位，不同bit表示不同的优先级
  • js中number是64位，但是整数会自动转成32位存储，舍弃了高位，做位运算同样也是只有32位，所以这里是用32位来表示优先级，因为后面要做位运算