【React】原理

最新推荐文章于 2025-05-31 16:01:08 发布

秀秀_heo

最新推荐文章于 2025-05-31 16:01:08 发布

阅读量904

点赞数 6

分类专栏： React 及其周边生态文章标签： react.js 前端前端框架

本文链接：https://blog.youkuaiyun.com/XiugongHao/article/details/142464955

版权

React 及其周边生态专栏收录该内容

89 篇文章

订阅专栏

笔记来源：小满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毫秒)。

浏览器一帧完成的任务：

处理事件的回调click.…事件
处理计时器的回调
开始帧
执行 requestAnimationFrame 动画的回调
计算机页面布局计算（DOM）合并到主线程
绘制
如果此时还有空闲时间，执行 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() {

}