【React】原理

笔记来源：小满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 = falsewhile (nextUnitOfWork && !shouldYield) {nextUnitOfWork = performUnitOfWork(nextUnitOfWork)shouldYield = deadline.timeRemaining() < 1}requestIdleCallback(workLoop)
}requestIdleCallback(workLoop) function performUnitOfWork() {}