React原理实例分析

蜗牛 互联网技术资讯 2022-07-29 23 0

本篇内容主要讲解“React原理实例分析”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“React原理实例分析”吧!

VDOM(虚拟dom)

react和vue都是基于vdom的前端框架。

web界面由DOM树来构建,当其中一部分发生变化时,其实就是对应的某个节点发生了变化。

若一次操作中有十次更新DOM的动作,虚拟DOM不会立即操作DOM,而是将这十次更新的diff内容保存到本地的一个js对象中,最终将这个js对象一次性attach到DOM树上,再进行后续的操作。

用js对象模拟DOM节点的好处是:

  • 页面的更新可以先全部反映在js对象(虚拟DOM)上,精准的对比关心的属性,避免大量无谓的计算。等更新完成后,再将最终的js对象映射成真是的DOM,交由浏览器去绘制。

  • 为应用带来的跨平台的能力,不再仅仅局限于浏览器端。比如:React-Native、canvas等。

//虚拟dom对象
{
    type: 'div',
    props: {
        id: 'aaa',
        className: ['bbb', 'ccc'],
        onClick: function() {}
    },
    children: []
}

react中,jsx由babel转义再经过render后生成我们想要的VDOM(虚拟DOM)。

Fiber架构

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

但是因为状态管理的差异导致了架构的差异。react的setState会渲染整个vdom,而一个应用的所有 vdom 可能是很庞大的,计算量就可能很大。

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

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

顺着这个思路,react 就改造为了 fiber 架构,目标是打断计算,分多次进行。

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

初始化渲染

根据 React Element 生成对应的 Fiber 树

1.根据 React Element 生成对应的 Fiber 树

首次执行ReactDOM.render 会创建fiberRoot 和 rootFiber。

  1. fiberRoot:整个应用的根节点(只能有一个)

  2. rootFiber:组件树的根节点(可以有多个)

2.根据组件返回的JSX在内存中依次创建Fiber节点,并连接在一起构建形成Fiber树,被称为workInProgress Fiber树。最后以 workInProgress 作为最新的渲染树,fiberRoot 的 current 指针指向 workInProgress 使其变为 current Fiber 树。到此完成初始化流程。

  1. workInProgress:正在内存中构建的 Fiber 树称为 workInProgress Fiber树。在一次更新中,所有的更新都是发生在 workInProgress 树上。在一次更新之后,workInProgress 树上的状态是最新的状态,那么它将变成 current 树用于渲染视图。

  2. current:正在视图层渲染的树叫做 current 树。

更新时

render阶段,创建 dom,打上增删改的 tag,等全部计算完之后,commit 阶段一次性更新到 dom。

React原理实例分析  react 第1张

render阶段

beginWork和completeWork阶段会循环最新的jsx生成的虚拟dom,通过对比虚拟dom和current Fiber树生成workinProgress Fiber树。

beginWork

创建本次循环主体的子Fiber节点

  • mount(首屏渲染)时创建子Fiber节点,并返回改新建节点;

  • update时若不满足复用条件,则与mount时一样创建新的子fiber节点,并diff出相应的effTag挂在FIber节点上,并返回该新建节点;

  • updata时若满足复用条件,且判断仍需处理其子节点的后代,则返回复用后的子Fiber节点

  • updata时若满足复用条件,且判断不需继续处理其子节点的后代,则直接返回null值;

completeWork

构建或更新DOM节点

  • 构建过程中,会自下而上将子节点插入到当前节点

  • 更新过程中,会计算DOM 节点的属性,一旦属性需要更新,会为DOM节点对应的workINProgress节点标记Update的effectTag

自下而上收集effectList,最终收集到root上

Diff到底是谁跟谁比?

Diff 是 vdom 和 current Fiber 对比,生成 workInProgressFiber

effectTag与effectList

render阶段不会真正操作dom,只会创建dom然后打个effectTag的增删改标记。commit阶段就根据标记来更新dom就可以了。

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

当然没问题,但是显然很低效。完全可以把有 effectTag 的节点收集到一个链表里,然后 commit 阶段直接遍历这个链表就行了。这个链表叫做 effectList。

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

这个队列叫做 effectList。

commit阶段

render阶段找到变化的部分,创建dom,打上增删改的tag,等全部计算完之后,commit阶段一次性更新到dom。

before mutation阶段(执行DOM操作前)

遍历effectList,依次执行:

1.处理DOM节点渲染/删除后的autoFocus、blur逻辑

2.调用getSnapshotBeforeUpdate生命周期钩子

3.调度useEffect mutation阶段(执行DOM操作)

遍历 effectList 来更新 dom

layout阶段(执行DOM操作后)

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

到此,相信大家对“React原理实例分析”有了更深的了解,不妨来实际操作一番吧!这里是蜗牛博客网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

评论