react fiber树学习 - Githubissues

背景：

fiber就是为了解决react渲染过深，无法中断执行的问题

拓展：

关于帧：一般来说，浏览器要保证1秒渲染60帧，这样才能保证让用户感觉不到卡顿。也就是要保证，每帧的渲染时间为1000ms/60，约为16ms
涉及到的两个windowAPI：requestIdleCallback与requestAnimationFrame requestIdleCallback(callback，outTime), 会在浏览器空闲的时候执行callback，callback接收到的第一个参数能获取到此帧执行完成后的剩余时间，一般也是跟上面的16帧相比的，但这个16帧不是固定的，浏览器可以动态控制。 requestAnimationFrame浏览器提供的绘制动画的 api 。它要求浏览器在下次重绘之前（即下一帧）调用指定的回调函数更新动画。

fiber单链表数据结构

` // 基本单元 class Update { constructor(payload, nextUpdate) { this.payload = payload // 数据 this.nextUpdate = nextUpdate // 下一个单元 } }

// 串联单元的队列 class UpdateQueue { constructor() { this.baseState = null this.firstUpdate = null this.lastUpdate = null } // 向队尾插入数据 enqueueUpdate(update) { if(!this.firstUpdate) { this.firstUpdate = this.lastUpdate = update }else { this.lastUpdate.nextUpdate = update this.lastUpdate = update } }

// 更新 forceUpdate() { let currentState = this.baseState || {} let currentUpdate = this.firstUpdate while(currentUpdate) { // 判断是函数还是对象，是函数则需要执行，是对象则直接返回 // 这里对应的是setState的第一个参数传回调函数的情况 let nextState = typeof currentUpdate.payload === 'function' ? currentUpdate.payload(currentState) : currentUpdate.payload currentState = { ...currentState, ...nextState } currentUpdate = currentUpdate.nextUpdate } this.firstUpdate = this.lastUpdate = null this.baseState = currentState return currentState } }`

1mikasa1 / react-demo

react fiber树学习 #3

背景：

拓展：