React前端框架实现原理的理解

目录
  • vdom
  • dsl 的编译
  • 渲染 vdom
  • 组件
  • 状态管理
  • react 架构的演变
    • fiber 架构
  • 总结

vdom

react 和 vue 都是基于 vdom 的前端框架,我们先聊下 vdom:

为什么 react 和 vue 都要基于 vdom 呢?直接操作真实 dom 不行么?

考虑下这样的场景:

渲染就是用 dom api 对真实 dom 做增删改,如果已经渲染了一个 dom,后来要更新,那就要遍历它所有的属性,重新设置,比如 id、clasName、onclick 等。

而 dom 的属性是很多的:

有很多属性根本用不到,但在更新时却要跟着重新设置一遍。

能不能只对比我们关心的属性呢?

把这些单独摘出来用 JS 对象表示不就行了?

这就是为什么要有 vdom,是它的第一个好处。

而且有了 vdom 之后,就没有和 dom 强绑定了,可以渲染到别的平台,比如 native、canvas 等等。

这是 vdom 的第二个好处。

我们知道了 vdom 就是用 JS 对象表示最终渲染的 dom 的,比如:

{
    type: 'div',
    props: {
        id: 'aaa',
        className: ['bbb', 'ccc'],
        onClick: function() {}
    },
    children: []
}

然后用渲染器把它渲染出来。

但是要让开发去写这样的 vdom 么?

那肯定不行,这样太麻烦了,大家熟悉的是 html 那种方式,所以我们要引入编译的手段。

dsl 的编译

dsl 是 domain specific language,领域特定语言的意思,html、css 都是 web 领域的 dsl。

直接写 vdom 太麻烦了,所以前端框架都会设计一套 dsl,然后编译成 render function,执行后产生 vdom。

vue 和 react 都是这样:

这套 dsl 怎么设计呢?

前端领域大家熟悉的描述 dom 的方式是 html,最好的方式自然是也设计成那样。

所以 vue 的 template,react 的 jsx 就都是这么设计的。

vue 的 template compiler 是自己实现的,而 react 的 jsx 的编译器是 babel 实现

编译成 render function 后再执行就是我们需要的 vdom。

接下来渲染器把它渲染出来就行了。

那渲染器怎么渲染 vdom 的呢?

渲染 vdom

渲染 vdom 也就是通过 dom api 增删改 dom。

比如一个 div,那就要 document.createElement 创建元素,然后 setAttribute 设置属性,addEventListener 设置事件监听器。

如果是文本,那就要 document.createTextNode 来创建。

所以说根据 vdom 类型的不同,写个 if else,分别做不同的处理就行了。

没错,不管 vue 还是 react,渲染器里这段 if else 是少不了的:

switch (vdom.tag) {
  case HostComponent:
    // 创建或更新 dom
  case HostText:
    // 创建或更新 dom
  case FunctionComponent:
    // 创建或更新 dom
  case ClassComponent:
    // 创建或更新 dom
}

react 里是通过 tag 来区分 vdom 类型的,比如 HostComponent 就是元素,HostText 就是文本,FunctionComponent、ClassComponent 就分别是函数组件和类组件。

那么问题来了,组件怎么渲染呢?

这就涉及到组件的原理了:

组件

我们的目标是通过 vdom 描述界面,在 react 里会使用 jsx。

这样的 jsx 有的时候是基于 state 来动态生成的。如何把 state 和 jsx 关联起来呢?

封装成 function、class 或者 option 对象的形式。然后在渲染的时候执行它们拿到 vdom 就行了。

这就是组件的实现原理:

switch (vdom.tag) {
  case FunctionComponent:
       const childVdom = vdom.type(props);
       render(childVdom);
       //...
  case ClassComponent:
     const instance = new vdom.type(props);
     const childVdom = instance.render();
     render(childVdom);
     //...
}

如果是函数组件,那就传入 props 执行它,拿到 vdom 之后再递归渲染。

如果是 class 组件,那就创建它的实例对象,调用 render 方法拿到 vdom,然后递归渲染。

所以,大家猜到 vue 的 option 对象的组件描述方式怎么渲染了么?

{
    data: {},
    props: {}
    render(h) {
        return h('div', {}, '');
    }
}

没错,就是执行下 render 方法就行:

 const childVdom = option.render();
 render(childVdom);

大家可能平时会写单文件组件 sfc 的形式,那个会有专门的编译器,把 template 编译成 render function,然后挂到 option 对象的 render 方法上:

所以组件本质上只是对产生 vdom 的逻辑的封装,函数的形式、option 对象的形式、class 的形式都可以。

就像 vue3 也有了函数组件一样,组件的形式并不重要。

基于 vdom 的前端框架渲染流程都差不多,vue 和 react 很多方面是一样的。但是管理状态的方式不一样,vue 有响应式,而 react 则是 setState 的 api 的方式。

真说起来,vue 和 react 最大的区别就是状态管理方式的区别,因为这个区别导致了后面架构演变方向的不同。

状态管理

react 是通过 setState 的 api 触发状态更新的,更新以后就重新渲染整个 vdom。

而 vue 是通过对状态做代理,get 的时候收集以来,然后修改状态的时候就可以触发对应组件的 render 了。

有的同学可能会问,为什么 react 不直接渲染对应组件呢?

想象一下这个场景:

父组件把它的 setState 函数传递给子组件,子组件调用了它。

这时候更新是子组件触发的,但是要渲染的就只有那个组件么?

明显不是,还有它的父组件。

同理,某个组件更新实际上可能触发任意位置的其他组件更新的。

所以必须重新渲染整个 vdom 才行。

那 vue 为啥可以做到精准的更新变化的组件呢?

因为响应式的代理呀,不管是子组件、父组件、还是其他位置的组件,只要用到了对应的状态,那就会被作为依赖收集起来,状态变化的时候就可以触发它们的 render,不管是组件是在哪里的。

这就是为什么 react 需要重新渲染整个 vdom,而 vue 不用。

这个问题也导致了后来两者架构上逐渐有了差异。

react 架构的演变

react15 的时候,和 vue 的渲染流程还是很像的,都是递归渲染 vdom,增删改 dom 就行。

但是因为状态管理方式的差异逐渐导致了架构的差异。

react 的 setState 会渲染整个 vdom,而一个应用的所有 vdom 可能是很庞大的,计算量就可能很大。

浏览器里 js 计算时间太长是会阻塞渲染的,会占用每一帧的动画、重绘重排的时间,这样动画就会卡顿。

作为一个有追求的前端框架,动画卡顿肯定是不行的。但是因为 setState 的方式只能渲染整个 vdom,所以计算量大是不可避免的。

那能不能把计算量拆分一下,每一帧计算一部分,不要阻塞动画的渲染呢?

顺着这个思路,react 就改造为了 fiber 架构。

fiber 架构

优化的目标是打断计算,分多次进行,但现在递归的渲染是不能打断的,有两个方面的原因导致的:

  • 渲染的时候直接就操作了 dom 了,这时候打断了,那已经更新到 dom 的那部分怎么办?
  • 现在是直接渲染的 vdom,而 vdom 里只有 children 的信息,如果打断了,怎么找到它的父节点呢?

第一个问题的解决还是容易想到的:

渲染的时候不要直接更新到 dom 了,只找到变化的部分,打个增删改的标记,创建好 dom,等全部计算完了一次性更新到 dom 就好了。

所以 react 把渲染流程分为了两部分: render 和 commit。

render 阶段会找到 vdom 中变化的部分,创建 dom,打上增删改的标记,这个叫做 reconcile,调和。

reconcile 是可以打断的,由 schedule 调度。

之后全部计算完了,就一次性更新到 dom,叫做 commit。

这样,react 就把之前的和 vue 很像的递归渲染,改造成了 render(reconcile + schdule) + commit 两个阶段的渲染。

从此以后,react 和 vue 架构上的差异才大了起来。

第二个问题,如何打断以后还能找到父节点、其他兄弟节点呢?

现有的 vdom 是不行的,需要再记录下 parent、silbing 的信息。所以 react 创造了 fiber 的数据结构。

除了 children 信息外,额外多了 sibling、return,分别记录着兄弟节点、父节点的信息。

这个数据结构也叫做 fiber。(fiber 既是一种数据结构,也代表 render + commit 的渲染流程)

react 会先把 vdom 转换成 fiber,再去进行 reconcile,这样就是可打断的了。

为什么这样就可以打断了呢?

因为现在不再是递归,而是循环了:

function workLoop() {
  while (wip) {
    performUnitOfWork();
  }
  if (!wip && wipRoot) {
    commitRoot();
  }
}

react 里有一个 workLoop 循环,每次循环做一个 fiber 的 reconcile,当前处理的 fiber 会放在 workInProgress 这个全局变量上。

当循环完了,也就是 wip 为空了,那就执行 commit 阶段,把 reconcile 的结果更新到 dom。

每个 fiber 的 reconcile 是根据类型来做的不同处理。当处理完了当前 fiber 节点,就把 wip 指向 sibling、return 来切到下个 fiber 节点。:

function performUnitOfWork() {
  const { tag } = wip;
  switch (tag) {
    case HostComponent:
      updateHostComponent(wip);
      break;
    case FunctionComponent:
      updateFunctionComponent(wip);
      break;
    case ClassComponent:
      updateClassComponent(wip);
      break;
    case Fragment:
      updateFragmentComponent(wip);
      break;
    case HostText:
      updateHostTextComponent(wip);
      break;
    default:
      break;
  }
  if (wip.child) {
    wip = wip.child;
    return;
  }
  let next = wip;
  while (next) {
    if (next.sibling) {
      wip = next.sibling;
      return;
    }
    next = next.return;
  }
  wip = null;
}

函数组件和 class 组件的 reconcile 和之前讲的一样,就是调用 render 拿到 vdom,然后继续处理渲染出的 vdom:

function updateClassComponent(wip) {
  const { type, props } = wip;
  const instance = new type(props);
  const children = instance.render();
  reconcileChildren(wip, children);
}
function updateFunctionComponent(wip) {
  renderWithHooks(wip);
  const { type, props } = wip;
  const children = type(props);
  reconcileChildren(wip, children);
}

循环执行 reconcile,那每次处理之前判断一下是不是有更高优先级的任务,就能实现打断了。

所以我们在每次处理 fiber 节点的 reconcile 之前,都先调用下 shouldYield 方法:

function workLoop() {
  while (wip && shouldYield()) {
    performUnitOfWork();
  }
  if (!wip && wipRoot) {
    commitRoot();
  }
}

shouldYiled 方法就是判断待处理的任务队列有没有优先级更高的任务,有的话就先处理那边的 fiber,这边的先暂停一下。

这就是 fiber 架构的 reconcile 可以打断的原理。通过 fiber 的数据结构,加上循环处理前每次判断下是否打断来实现的。

聊完了 render 阶段(reconcile + schedule),接下来就进入 commit 阶段了。

前面说过,为了变为可打断的,reconcile 阶段并不会真正操作 dom,只会创建 dom 然后打个 effectTag 的增删改标记。

commit 阶段就根据标记来更新 dom 就可以了。

但是 commit 阶段要再遍历一次 fiber 来查找有 effectTag 的节点,更新 dom 么?

这样当然没问题,但没必要。完全可以在 reconcile 的时候把有 effectTag 的节点收集到一个队列里,然后 commit 阶段直接遍历这个队列就行了。

这个队列叫做 effectList。

react 会在 commit 阶段遍历 effectList,根据 effectTag 来增删改 dom。

dom 创建前后就是 useEffect、useLayoutEffect 还有一些函数组件的生命周期函数执行的时候。

useEffect 被设计成了在 dom 操作前异步调用,useLayoutEffect 是在 dom 操作后同步调用。

为什么这样呢?

因为都要操作 dom 了,这时候如果来了个 effect 同步执行,计算量很大,那不是把 fiber 架构带来的优势有毁了么?

所以 effect 是异步的,不会阻塞渲染。

而 useLayoutEffect,顾名思义是想在这个阶段拿到一些布局信息的,dom 操作完以后就可以了,而且都渲染完了,自然也就可以同步调用了。

实际上 react 把 commit 阶段也分成了 3 个小阶段。

before mutation、mutation、layout。

mutation 就是遍历 effectList 来更新 dom 的。

它的之前就是 before mutation,会异步调度 useEffect 的回调函数。

它之后就是 layout 阶段了,因为这个阶段已经可以拿到布局信息了,会同步调用 useLayoutEffect 的回调函数。而且这个阶段可以拿到新的 dom 节点,还会更新下 ref。

至此,我们对 react 的新架构,render、commit 两大阶段都干了什么就理清了。

总结

react 和 vue 都是基于 vdom 的前端框架,之所以用 vdom 是因为可以精准的对比关心的属性,而且还可以跨平台渲染。

但是开发不会直接写 vdom,而是通过 jsx 这种接近 html 语法的 DSL,编译产生 render function,执行后产生 vdom。

vdom 的渲染就是根据不同的类型来用不同的 dom api 来操作 dom。

渲染组件的时候,如果是函数组件,就执行它拿到 vdom。class 组件就创建实例然后调用 render 方法拿到 vdom。vue 的那种 option 对象的话,就调用 render 方法拿到 vdom。

组件本质上就是对一段 vdom 产生逻辑的封装,函数、class、option 对象甚至其他形式都可以。

react 和 vue 最大的区别在状态管理方式上,vue 是通过响应式,react 是通过 setState 的 api。我觉得这个是最大的区别,因为它导致了后面 react 架构的变更。

react 的 setState 的方式,导致它并不知道哪些组件变了,需要渲染整个 vdom 才行。但是这样计算量又会比较大,会阻塞渲染,导致动画卡顿。

所以 react 后来改造成了 fiber 架构,目标是可打断的计算。

为了这个目标,不能变对比变更新 dom 了,所以把渲染分为了 render 和 commit 两个阶段,render 阶段通过 schedule 调度来进行 reconcile,也就是找到变化的部分,创建 dom,打上增删改的 tag,等全部计算完之后,commit 阶段一次性更新到 dom。

打断之后要找到父节点、兄弟节点,所以 vdom 也被改造成了 fiber 的数据结构,有了 parent、sibling 的信息。

所以 fiber 既指这种链表的数据结构,又指这个 render、commit 的流程。

reconcile 阶段每次处理一个 fiber 节点,处理前会判断下 shouldYield,如果有更高优先级的任务,那就先执行别的。

commit 阶段不用再次遍历 fiber 树,为了优化,react 把有 effectTag 的 fiber 都放到了 effectList 队列中,遍历更新即可。

在dom 操作前,会异步调用 useEffect 的回调函数,异步是因为不能阻塞渲染。

在 dom 操作之后,会同步调用 useLayoutEffect 的回调函数,并且更新 ref。

所以,commit 阶段又分成了 before mutation、mutation、layout 这三个小阶段,就对应上面说的那三部分。

我觉得理解了 vdom、jsx、组件本质、fiber、render(reconcile + schedule) + commit(before mutation、mutation、layout)的渲染流程,就算是对 react 原理有一个比较深的理解了。

以上就是React前端框架实现原理的理解的详细内容,更多关于React前端框架实现原理的资料请关注我们其它相关文章!

(0)

相关推荐

  • 采用React编写小程序的Remax框架的编译流程解析(推荐)

    Remax是蚂蚁开源的一个用React来开发小程序的框架,采用运行时无语法限制的方案.整体研究下来主要分为三大部分:运行时原理.模板渲染原理.编译流程:看了下现有大部分文章主要集中在Reamx的运行时和模板渲染原理上,而对整个React代码编译为小程序的流程介绍目前还没有看到,本文即是来补充这个空白. 关于模板渲染原理看这篇文章:https://www.jb51.net/article/132635.htm 关于remax运行时原理看这篇文章:https://www.jb51.net/artic

  • Java反应式框架Reactor中的Mono和Flux

    1. 前言 最近写关于响应式编程的东西有点多,很多同学反映对Flux和Mono这两个Reactor中的概念有点懵逼.但是目前Java响应式编程中我们对这两个对象的接触又最多,诸如Spring WebFlux.RSocket.R2DBC.我开始也对这两个对象头疼,所以今天我们就简单来探讨一下它们. 2. 响应流的特点 要搞清楚这两个概念,必须说一下响应流规范.它是响应式编程的基石.他具有以下特点: 响应流必须是无阻塞的.响应流必须是一个数据流.它必须可以异步执行.并且它也应该能够处理背压. 背压是

  • 前端框架学习总结之Angular、React与Vue的比较详解

    近几年前端的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等: 2.开发框架,如Angular,React,Vue.js,Angular2等: 3.开发工具的丰富和前端工程化,像Grunt,Gulp,Webpack,npm,eslint,mocha这些技术: 4.前端开发范围的扩展,如服务端的nodejs,express,koa,meteor,GraphQL;移动端和跨平台的PhoneGap,ionic,Reac

  • yii2.0框架使用 beforeAction 防非法登陆的方法分析

    本文实例讲述了yii2.0框架使用 beforeAction 防非法登陆的方法.分享给大家供大家参考,具体如下: beforeAction基本原理: 对比 1.执行顺序 init > beforeAction 2.调用子函数时,两个函数都不会再次执行 3.返回值 init返回false继续执行,beforeAction停止执行 4.执行EXIT,全部停止 从框架的示例代码来看,init用于初始化数据,beforeAction用户事件的处理 代码 // 登录统一验证 public function

  • React Native项目框架搭建的一些心得体会

    React Native 是Facebook于2015年4月开源的跨平台移动应用开发框架, 短短的一两年的发展就已经有很多家公司支持并采用此框架来搭建公司的移动端的应用, React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP. 项目框架与项目结构 1. 项目中使用的技术栈 react native.react hook.typescript.immer.tslint.jest等. 都是比较常见的,就不多做介绍了 2. 数据处理

  • JavaScript框架Angular和React深度对比

    本文通过从概念和使用思路上的车别,详细给读者分析了Angular和React这两个JavaScript框架的区别之处,希望我们整理的对你有用. Angular和React这两个JavaScript框架可谓红的发紫,同时针对这两个框架的选择变成了当下最容易被问及或者被架构设计者考虑的问题,本文或许无法告诉你哪个框架更优秀,但尽量从更多的角度去比较两者,尽可能的为你在选择时提供更多的参考意见. 选择的方法 在选择之前,我们尝试带着一些问题去审视你将要选择的框架(或者是任何工具),尝试用这些问题的答案

  • React前端框架实现原理的理解

    目录 vdom dsl 的编译 渲染 vdom 组件 状态管理 react 架构的演变 fiber 架构 总结 vdom react 和 vue 都是基于 vdom 的前端框架,我们先聊下 vdom: 为什么 react 和 vue 都要基于 vdom 呢?直接操作真实 dom 不行么? 考虑下这样的场景: 渲染就是用 dom api 对真实 dom 做增删改,如果已经渲染了一个 dom,后来要更新,那就要遍历它所有的属性,重新设置,比如 id.clasName.onclick 等. 而 dom

  • JavaScript前端构建工具原理的理解

    目录 前言 构建工具的前世今生 YUI Tool + Ant Grunt / Gulp Webpack / Rollup / Parcel Vite / Esbuild js 模块化的发展史和构建工具的变化 青铜时代 白银时代 黄金时代 结束语 前言 最近有幸在前端团队里面做了一次关于 webpack 的技术分享.在分享的准备过程中,为了能让大家更好的理解 webpack,特意对市面上以前和现在流行的构建工具做了一个梳理总结.在整理和分享的过程中,获益匪浅,对前端构建工具有了新的认识.在这里,将

  • React应用框架Dva数据流向原理总结分析

    目录 Dva是什么? 流程图怎么看? Model对象属性 数据流向 Dva是什么? 在刚刚接触Dva时,我最想知道的第一个问题就是: Dva官网文档的介绍是: dva 是体验技术部开发的 React 应用框架,将上面三个 React 工具库包装在一起,简化了 API,让开发 React 应用更加方便和快捷. dva = React-Router + Redux + Redux-saga 说实话这些名词让我只能一个一个的百度,虽然不能说毫无收获,但是依然难以理解. 现在我的理解Dva是一个轻量化的

  • Vue.js 2.0 和 React、Augular等其他前端框架大比拼

    React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式(Reactive)和组件化(Composable)的视图组件. 保持注意力集中在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库. 相似的作用域,我们会用更多的时间来讲这一块的比较.不仅我们要保持技术的准确性,同时兼顾平衡.我们指出React比Vue更好的地方,例如,他们的生态系统和丰富的自定义渲染器. React社区在这里非常积极地帮助我们实现这一平衡,特别感谢来自 React

  • 深入探讨前端框架react

    摘要: 最近公司要做一个嵌套在app中的应用,考虑着用Facebook的react来开发view,所以就研究了下.下面是我在开发中遇到的坑,希望能给你帮助. 项目地址:https://github.com/baixuexiyang/react Issue:https://github.com/baixuexiyang/react/issues 欢迎star和fork! react优势: •仅仅只要表达出你的应用程序在任一个时间点应该长的样子,然后当底层的数据变了,React 会自动处理所有用户界

  • React Context原理深入理解源码示例分析

    目录 正文 一.概念 二.使用 2.1.React.createContext 2.2.Context.Provider 2.3.React.useContext 2.4.Example 三.原理分析 3.1.createContext 函数实现 3.2. JSX 编译 3.3.消费组件 - useContext 函数实现 3.4.Context.Provider 在 Fiber 架构下的实现机制 3.5.小结 四.注意事项 五.对比 useSelector 正文 在 React 中提供了一种「

  • Vue.js React与Angular流行前端框架优势对比

    目录 Vue.js.React和Angular对比 以下是Vue.js的代码示例: 以下是React的代码示例: 以下是Angular的代码示例: Vue.js.React和Angular对比 Vue.js.React和Angular都是流行的前端框架,它们都有自己的优势和劣势. 以下是它们的比较: Vue.js Vue.js是一个轻量级的前端框架,它的核心库只有18KB,因此整个框架的体积很小.Vue.js通过简单的API和组件化的架构,使得开发更加简单,易于上手和维护.Vue.js支持双向数

  • React服务端渲染原理解析与实践

    关于服务端渲染也就是我们说的SSR大多数人都听过这个概念,很多同学或许在公司中已经做过服务端渲染的项目了,主流的单页面应用比如说Vue或者React开发的项目采用的一般都是客户端渲染的模式也就是我们说的CSR. 但是这种模式会带来明显的两个问题,第一个就是TTFP时间比较长,TTFP指的就是首屏展示时间,同时不具备SEO排名的条件,搜索引擎上排名不是很好.所以我们可以借助一些工具来进行改良我们的项目,将单页面应用编程服务器端渲染项目,这样就可以解决掉这些问题了. 目前主流的服务器端渲染框架也就是

  • 小白教程|一小时上手最流行的前端框架vue(推荐)

    前言 vue是现在很火的一个前端MVVM框架,它以数据驱动和组件化的思想构建,与angular和react并称前端三大框架.相比angular和react,vue更加轻巧.高性能.也很容易上手.大家也可以移步vue官网,看一下它的介绍和核心功能介绍.简单粗暴的理解就是:用vue开发的时候,就是操作数据,然后vue就会处理,以数据驱动去改变DOM.使用vue,我们可以集中精力于如何处理数据上,数据改变后,页面显示也会随之改变.相比jquery那种操作DOM元素的开发方式,能有效提高开发效率,个人觉

  • django框架中间件原理与用法详解

    本文实例讲述了django框架中间件原理与用法.分享给大家供大家参考,具体如下: 中间件:轻量级,介于 request和response之间的一道处理过程,在全局上改变了输入和输出 在django中就默认使用了七个中间件 MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.

随机推荐