实现

[TOC]

todo

• 渲染dom
• 更新dom
• 支持class
• 支持function组件
• 支持hooks
• diff
• class setState 过程
• event 委托

RAF

requestIdleCallback

告知浏览器：有任务要执行，请在闲暇时刻执行

• requestIdleCallback(workLoop, {timeout: 1000}); // timeout: 告诉浏览器: 在1000毫秒之后，即使没有空余时间也要帮我执行。
• workLoop(deadline: {didTimeout: 该任务是否已经超时, timeRemaining: timeRemaining()告知此帧还剩余多少时间})
• expirationTime: 优先级概念~

MessageChannel

单链表

单链表是一种链式存储的数据结构 链表中的数据由节点表示的，每个节点由元素和指针构成

• 元素：存储数据的存储单元
• 指针：指向下一个节点，连接每个节点的地址

fiber

把任务拆分许多个任务（一个fiber节点为一个任务），每次只执行一个任务 每个执行完成后看还有没有时间，有的话就继续执行任务，没时间就放弃执行，执行权交给浏览器

fiber 历史

fiber 之前的协调

reconcilation 协调阶段：

• React 会递归对比 vDOM，找出需要变动的节点，然后同步更新
• React 在该阶段是递归调用，执行栈会越来越深，而且无法中断，一旦中止，很难恢复
  • 导致用户事件无法响应
  • 掉帧：卡顿

fiber 是什么？

是一个执行单元

• react现在使用链表，每个 virtualDOM 为一个fiber

是一种数据结构

fiber 阶段

element

见 element 中的 element，为链表数据结构

render（协调阶段）

把element转换为fiber链表，并返回其effect链表

• 特点

  • 可被中断
  • 找出所有的节点变更（变更又称之为==副作用==：effect）：删除、新增、属性变更
    • 拆分维度：virtual dom

• 遍历规则：

  • 从顶点开始
  • 如果有大儿子，则先遍历第一个（大）儿子
  • 如果无大儿子，标志该节点无子节点，直接完成 why:
  • 如果有弟弟，则遍历弟弟
  • 没有弟弟，则返回父节点并标识父节点完成（所有的子节点完成后则自己完成），有叔叔（相对于当前节点）则遍历叔叔
  • 没有父节点则遍历结束

• 副作用链表

  • 初次渲染

    • 完成链规则： 所有的儿子完成则自己完成，why: 不是生成后就挂载，而分成了两个阶段？
    • effect链：等同于完成链，用于下一个阶段
    • summary: 渲染时，从祖先节点开始挂载: 由上而下的顺序

  • 后续更新

    • 计算出其更改

commit

提交阶段：将上一个阶段计算出来的需要处理的副作用（Effects）一次性执行，这个节点必须同步执行，不能被打断（否则：想象一下节点一个一个的蹦出来，或者突然一段文件增加 😅 ）

• DOM 更新创建阶段

更新（无diff部分 -> key）

class类组件 + setState

函数式组件 + hooks