react时间分片实现流程详解

// 节点遍历的入口函数
function Reconcile协调() {
    节点遍历()
}
function Schedule调度() {
    创建分片(Reconcile协调)
}

function 创建分片(需要被调度的函数) {
    const 新的任务 = {
        callback: 需要被调度的函数
    }
}

const taskQueue = []
function 创建分片(需要被调度的函数) {
    const 新的任务 = {
        callback: 需要被调度的函数,
        expirationTime: performance.now() + 5000
    }
    taskQueue.push(新的任务)
    发起异步调度()
}

function 分片过期校验() {
    return (perfromance.now() - 分片开启时间) >= 5000
}
let 需要被遍历的幸运儿节点 = null
function 构建节点() {
    /** * ...在这里进行节点构建工作 */
    需要被遍历的幸运儿节点 = 需要被遍历的幸运儿节点.next
}
function 节点遍历() {
    while (需要被遍历的幸运儿节点 != null && !分片过期校验()) {
        构建节点()
    }
}
function Schedule调度() {
    创建分片(Reconcile协调)
}

function 分片过期校验() {
    return (perfromance.now() - 分片开启时间) >= 5000
}
function 分片事件循环() {
    let 栈顶任务 = taskQueue.peek()

    while (栈顶任务) {
        if (分片过期校验()) break
        const 栈顶任务回调 = 栈顶任务.callback()
        if (typeof 栈顶任务回调 == 'function') {
            // 当前任务还没有执行完，继续搞
            栈顶任务.callback = 栈顶任务回调
        } else {
            // 当前任务已执行完，弹出队列
            taskQueue.pop()
        }
        栈顶任务 = taskQueue.peek()
    }
    // 还有任务哦
    if (栈顶任务) return true
    return false
}
function 分片执行() {
    分片开启时间 = performance.now()
    var 是否还有任务未执行完毕
    try {
        是否还有任务未执行完毕 = 分片事件循环()
    } finally {
        // 分片重启
        if (是否还有任务未执行) 发起异步调度()
    }
}
function 发起异步调度() {
    // 这里实际上是异步执行，看下面有间隔
    分片执行()
}

function 发起异步调度() {
    // 将主线程短暂的交还给浏览器
    setTimeout(() => {
        分片执行()
    }, 0)
}

const taskQueue = []
let 分片开启时间 = -1
// **时间分片核心**
const 分片过期校验 = () => {
    return (perfromance.now() - 分片开启时间) >= 5000
}
function 分片事件循环() {
    let 栈顶任务 = taskQueue.peek()
    while (栈顶任务) {
        // 每执行完一个任务，都要校验一下分片是否过期
        if (分片过期校验()) break
        const 栈顶任务回调 = 栈顶任务.callback()
        if (typeof 栈顶任务回调 == 'function') {
            // 当前任务还没有执行完，继续搞
            栈顶任务.callback = 栈顶任务回调
        } else {
            // 当前任务已执行完，弹出队列
            taskQueue.pop()
        }
        栈顶任务 = taskQueue.peek()
    }
    // 还有任务哦
    if (栈顶任务) return true
    return false
}
function 分片执行() {
    分片开启时间 = performance.now()
    var 是否还有任务未执行完毕
    try {
        是否还有任务未执行完毕 = 分片事件循环()
    } finally {
        // **时间分片核心：分片重启**
        if (是否还有任务未执行) 发起异步调度()
    }
}
// 实例化 MessageChannel
const channel = new MessageChannel()
const port2 = channel.port2
channel.port1.onmessage = 分片执行
function 发起异步调度() {
    // 向通道1发消息，通道1收到消息就会执行分片任务
    // **时间分片核心：延迟执行**
    port2.postMessage(null)
}
function 创建分片(需要被调度的函数) {
    // **时间分片核心：分片开启**
    const 新的任务 = {
        callback: 需要被调度的函数,
        expirationTime: performance.now() + 5000
    }
    taskQueue.push(新的任务)
    发起异步调度()
}
export default {
    创建分片,
    分片过期校验
}

import * as Scheduler from './Scheduler'
const {
    创建分片,
    分片过期校验
} = Scheduler
let 需要被遍历的幸运儿节点 = null
function 构建节点() {
    /** * ...在这里进行节点构建工作 */
    需要被遍历的幸运儿节点 = 需要被遍历的幸运儿节点.next
}
function 节点遍历() {
    // **时间分片核心：分片中断**
    while (需要被遍历的幸运儿节点 != null && !分片过期校验()) {
        构建节点()
    }
}
function Schedule调度() {
    创建分片(Reconcile协调)
}
function 调度入口() {
    需要被遍历的幸运儿节点 = react应用根节点
    Schedule调度()
}
调度入口()