React FiberFiber 1.Fiber是一种数据结构，对象 2.Fiber是一个执行单元执行流程 1.Fib

Fiber

1.Fiber是一种数据结构，对象

2.Fiber是一个执行单元

执行流程

1.Fiber和浏览器交替获取控制权

帧

1.每个帧的开头包括样式计算，布局和绘制等等

2.GUI渲染和Javascript的执行是互斥的

window.requestAnimationFrame

window.requestAnimationFrame(callback)

let start
let root = document.getElementById("root")

function animate(timeStart) {
  if(!start) start = timeStart
  console.log(timeStart - start)
  root.style.transform = "translateX(" + timeStart * 0.01 + "px)"
  if(timeStart < 10000)
    window.requestAnimationFrame(animate)
}
window.requestAnimationFrame(animate)

window.requestIdleCallback

浏览器空闲时调用

function sleep(duration) {
  let now = Date.now()
  while(duration + now > Date.now()) {
  }
}

sleep(2000)
console.log(123)

function works = [
  () => console.log('task 1'),
  () => console.log('task 2'),
  () => console.log('task 3'),
  () => console.log('task 4'),
  () => console.log('task 5'),
]

function progress(deadline) {
  console.log('剩余空闲时间:', deadline.timeRemaining())
  if(deadline.timeRemaining()>0 && works.length>0) {
    performUnitOfWork()
  }
  if(works.length>0) {
    window.requestIdleCallback(progress)
  }
}

function performUnitOfWork() {
  let work = works.shift()
  work()
}

window.requestIdelCallback(progress)

MessageChannel

let channel = new MessageChannel()
let port1 = channel.port1
let port2 = channel.port2
port1.onmessage = function(e) {
  console.log("接收到的数据:",e.data)
}
port2.onmessage = function(e) {
  console.log("接收到的数据:",e.data)
}
port1.postMessage("port1")
port2.postMessage("port2")

React Hooks & Fiber

hooks 就是通过把数据挂载到组件对应的 fiber 节点上来实现的

FiberNode.memoiedState useState()

FiberNode.queue setState()

FiberNode.updateQueue useEffect()

class组件保存自定义状态

function组件保存链表头指针