Open 1mikasa1 opened 2 years ago
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 } }`
背景:
fiber就是为了解决react渲染过深,无法中断执行的问题
拓展: