【React】原理

时间:2024-09-29 16:23:03

笔记来源:小满zs

虚拟 DOM

在这里插入图片描述

// react.js
// jsx => babel | swc => React.createElement
const React = {
    createElement(type, props, ...children) {
        return {
            type,
            props: {
                ...props,
                children: children.map(child => typeof child === 'object' ? child : React.createTextElement(child))
            }
        }
    },
    createTextElement(text) {
        return {
            type: 'TEXT_ELEMENT',
            props: {
                nodeValue: text,
                children: []
            }
        }
    },
}

// 测试 vDOM
const vDOM = React.createElement('div', { id: 'foo' }, React.createElement('span', null, 'bar'))
console.log("=>(react.js:24) vDOM", vDOM);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="./react.js"></script>
</body>
</html>

在这里插入图片描述

任务切片

浏览器一帧为60FPS,也就是16ms(1000毫秒/60帧≈16.67毫秒)。

浏览器一帧完成的任务:

  1. 处理事件的回调click.…事件
  2. 处理计时器的回调
  3. 开始帧
  4. 执行 requestAnimationFrame 动画的回调
  5. 计算机页面布局计算(DOM)合并到主线程
  6. 绘制
  7. 如果此时还有空闲时间,执行 requestldleCallback(React 使用了该函数的思想,React 自己又实现了 requestldleCallback)
// 完成虚拟 DOM 转 fiber 结构和时间切片
let nextUnitOfWork = null
function workLoop(deadline) {
    let shouldYield = false
    while (nextUnitOfWork && !shouldYield) {
        nextUnitOfWork = performUnitOfWork(nextUnitOfWork)
        shouldYield = deadline.timeRemaining() < 1
    }
    requestIdleCallback(workLoop)
}

requestIdleCallback(workLoop) 

function performUnitOfWork() {

}

对任务切片可以简单理解为 将所有的任务分成一个一个小任务,这里小任务函数都放在 requestIdleCallback 中,先执行优先级高的小任务,每一帧执行一个小任务,直到将所有小任务执行完毕。

待完成~