React原理

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云原生数据库 PolarDB MySQL 版,Serverless 5000PCU 100GB
云数据库 Redis 版,社区版 2GB
推荐场景:
搭建游戏排行榜
简介: 【4月更文挑战第4天】本文介绍了React的核心概念,包括jsx、React.createElement和fiber。jsx是React的语法糖,被转换为React.createElement生成虚拟DOM (vDOM)以优化性能。vDOM是轻量的数据结构,用于描述DOM状态。React通过fiber结构改进渲染性能,将同步任务拆分成小任务,利用requestIdleCallback在浏览器空闲时执行,确保流畅的用户体验。fiber是增强的vDOM,包含额外的引用指针。文章还提及了diff算法和hooks在React中的作用。

本文主要讲手写React中重要的几个部分,有助于建立对React源码的认知。

  1. CreateElement
    相信大家一定对jsx不陌生
<div title="box">
    <p>jsx</p>
    <span>hhh</span>
</div>

React中的jsx其实就是一个语法糖,上述jsx经过babel翻译后是

React.createElement('div', {
   title: 'box'}, 
    React.createElement('p', {
   }, 'jsx'),
    React.createElement('span', {
   }, 'hhh')
)

React.createElement: (type, props, ...children) => vDom

也就是说我们在写jsx实际上就是在写一个又一个嵌套的React.createElement。只是这样写太难维护了,所以使用了jsx。

React.createElement是干什么的?产生vDom的。
vDom(Virtual DOM),虚拟Dom节点,也就是自定义的一种数据结构,用来对应页面上真实的Dom节点。我们通过操纵vDom来操作真实的节点。
为什么使用vDom?

vDom比真实Dom轻量太多,真实Dom挂载的属性太多,很多根本用不上
可进一步支持跨平台,如RN
vDom结构如下

vDom: {
   
    type,
    props: {
   
        ...props,
        children
    }
}

我们自己写的createElement如下

// 将页面节点分为两类,text和非text
function createElement(type, props, ...children) {
   
    return {
   
        typp,
        props: {
   
            ...props,
            children: children.map(child => typeof child === 'object' ? child: createTextNode(child))
        }
    }
}

// 单独定义text vDom
function createTextNode(text) {
   
    return {
   
        type: 'TEXT',
        props: {
   
            nodeValue: text,
            children: []
        }
    }
}

一切都很清楚了。我们写了一堆jsx以为描述了页面上真实dom的排布,实际上,babel将jsx翻译为了一堆的React.createElement,也就是说,最后我们写的jsx变成了一个vDom树
就拿最开始的例子

<div title="box">
    <p>jsx</p>
    <span>hhh</span>
</div>

====={
   
    type: 'div',
    props: {
   
        title: 'box',
        children: [
            {
   
                type: 'p',
                props: {
   
                    children: [{
   type: 'TEXT', props: {
   nodeValue: 'jsx', children: []}}]
                }
            },
            {
   
                type: 'span',
                props: {
   
                    children: [{
   type: 'TEXT', props: {
   nodeValue: 'jsx', children: []}}]
                }
            }
        ]
    }
}

最后我们得到了上面这个数据结构,它就是我们所描述的页面,下面,就是将这个数据结构渲染成真实dom

  1. fiber
    根据上面的vDom树,直接渲染出真实页面很简单(递归createElement,appendChild),但是存在一个问题,每次render都会重绘整个页面,而这个过程是同步的,很耗时,会阻塞高优先级的任务,比如用户输入,动画之类。
    React的解决办法是:

将长时间的同步任务拆分成多个小任务,从而让浏览器能够抽身去响应其他事件,等他空了再回来继续计算

这个是思路,实现可以使用requestIdleCallback和fiber

requestIdleCallback是一个浏览器实验性API,实现让浏览器空闲的时候来计算(React团队自己实现了这个API)
fiber是一种数据结构,可进行中断和回溯
具体来说,实现如下

nextUnitOfWork和workInProgressRoot是两个全局变量
nextUnitOfWork表示下一个访问的fiber节点
workInProgressRoot也叫wipRoot表示本次渲染的fiber树根节点
performUnitOfWork: (fiber) => fiber,传入要访问(工作)的fiber节点,返回下一个待处理的fiber节点
commitRoot: 提交所有vDom修改,一次性渲染到页面上

function workLoop(deadline) {
   
  while (nextUnitOfWork && deadline.timeRemaining() > 1) {
   
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
  }
  if (!nextUnitOfWork && workInProgressRoot) {
   
    commitRoot();
  }

  requestIdleCallback(workLoop);
}

requestIdleCallback(workLoop);

这段代码的意思是:
如果浏览器空闲,且存在待处理fiber,
就会处理该fiber并返回下一个待处理fiber
如果不存在待处理fiber了,而且本次要执行渲染,
就会将修改提交到页面上。
这个工作由浏览器调度,一直持续着。

那fiber到底长什么样呢?首先,说了fiber就是一种数据结构,不要害怕它
fiber我认为就是对vDom的一个扩展。按面向对象来说,可以认为fiber extends vDom

fiber: {
   
    // 和vDom相同的属性
    type,
    props,
    //----
    dom, // 对应的真实dom节点
    child, // 子指针,指向第一个儿子
    sibling, // 兄弟指针,指向后一个相邻兄弟
    return, // 父指针,每个儿子都有
    alternate, // 老的fiber节点,用于diff
    effectTag, // 标记,用于向页面提交更改,REPLACEMENT | UPDATE | DELETION
    hooks // 该fiber上挂载的hook 
}

后面三个属性可以先不看,相信你已经知道fiber长什么样了,就是一棵多了几个指向的树
下面分别来看一下提到的几个函数,performUnitOfWork,commitRoot

结语
React主要涉及这么几个方面:

React.createElement创建vDom
浏览器闲时调度
fiber
diff
hooks

目录
相关文章
|
13天前
|
JSON 缓存 前端开发
【React】React原理面试题集锦
本文集合一些React的原理面试题,方便读者以后面试查漏补缺。作者给出自认为可以让面试官满意的简易答案,如果想要了解更深刻,可以点击链接查看对应的详细博文。在此对链接中的博文作者非常感谢🙏。
51 0
|
13天前
|
存储 资源调度 前端开发
React原理 即 React路由基础
React原理 即 React路由基础
55 1
|
13天前
|
前端开发 JavaScript 算法
react diff 原理
react diff 原理
|
13天前
|
存储 人工智能 开发框架
【AI大模型应用开发】【AutoGPT系列】0. AutoGPT概念及原理介绍 - Agent开发框架及ReAct方法
【AI大模型应用开发】【AutoGPT系列】0. AutoGPT概念及原理介绍 - Agent开发框架及ReAct方法
46 0
|
6月前
|
JavaScript 前端开发 虚拟化
理解React页面渲染原理,如何优化React性能?
理解React页面渲染原理,如何优化React性能?
68 0
|
13天前
|
前端开发 JavaScript
前端框架React原理
前端框架React原理
38 0
|
13天前
|
前端开发 JavaScript API
介绍一下React Router的工作原理。
介绍一下React Router的工作原理。
38 5
|
13天前
|
前端开发
《深入理解前端框架React Hooks的原理与实践》
本文将深入探讨前端框架React中Hooks的原理及其实际应用,帮助读者更好地理解React Hooks的工作机制,并通过示例代码展示如何利用Hooks来提升前端开发效率和代码质量。
43 0
|
13天前
|
前端开发 开发者
React合成事件的原理是什么
React合成事件的原理是什么
58 0
|
13天前
|
前端开发 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> React全栈环境
《Webpack5 核心原理与应用实践》学习笔记-> React全栈环境
44 0