likes
comments
collection
share

react 架构大概流程

作者站长头像
站长
· 阅读数 34

之前写了一篇react相关的文章，但是那篇文章大都在介绍代码，对思想架构基本没什么涉及。

这篇文章一直没有想好怎么写，react内部属实有够复杂的。看了好多人对react的架构理解，这里动笔写一下，有不同意见欢迎diss.

这里首推参考的文章:

卡颂大佬的react源码解析

DavidWong的一眼看穿react4步曲

React 为什么使用 Lane 技术方案

这一篇文章可能有不对的地方，后续有新的理解了也会改。这一篇不会有很多代码，看看用图或者大白话能不能说明白它。

首先react为啥用fiber架构这就不多说了，看以前这个：https://segmentfault.com/a/11...

我们简单按react架构分下层

  1. Scheduler调度负责找出高优先级的任务 进行协调
  2. Reconciler协调构建 Fiber 数据结构，比对 Fiber 对象找出差异, 记录 Fiber 对象要进行的 DOM 操作（初始加载的时候，负责组装html片段）
  3. Renderer渲染 负责将发生变化的部分渲染到页面上(后续我们称它为commit)

第一段

fiber结构

说到这我们先不考虑优先级，先说正常同步优先级渲染出react树是啥样的，参考了这个知乎的图https://www.zhihu.com/questio...

我们通过ReactDom.render创建出来的一个react应用的结构如，下图

react 架构大概流程

fiberRoot是这个react应用的根，它有个current指向当前界面上渲染好的fiber树，那rootFiber就是我们的指定挂载到哪个元素上的真实DOM的fiber，例如

ReactDom.render(<App/>, document.getElementById('root'))

那rootFiber就是id为root的真实DOM的fiber，我们可以看到图上有两个rootFiber树中间有属性可以互相访问，我们看图可以看到一个是current树，另一个被称为workInProgress树。

workInProgress树：我们每次通过不同方式发起更新，就是要在内存中基于current树来构建这颗树（内存中构建时，current的是否复用就是react的diff算法了），当workInProgress树构建完成提交(commit)后，fiberRoot的current就会指向它，此时它就变成了current树。(低优先级任务构建的过程中被高优先级打断的话，会重新开始构建workInProgress树)

重点：很多文章里说过react应用中只有一个fiberRoot,这里每ReactDom.render一次就可以认为是一个react应用。(验证了好久)

这个两棵树的方式 在react中被称为双缓存技术。

如果上面文字描述看不是很明白的话，建议看下卡颂大佬的，这一篇fiber树的update和mount的不同表现

接下来我们看react的虚拟dom是如何变成fiber的，我们知道jsx会被babel的jsx插件转换为react.createElement函数，那这个函数产生的就是我们平时说的虚拟dom的结构，它是个树形结构，我们通过协调层Reconciler首次构建时会把这个虚拟dom的结构深度优先遍历的方式来形成一个链表结构的fiber树(后续我们就可以循环该链表了)，我们看一段代码看它转换之后的一个结果，如下：

export default class Index extends React.Component{
   state={ number:666 } 
   handleClick=()=>{
     this.setState({
         number:this.state.number + 1
     })
   }
   render(){
     return 
     <div>
       hello，world
       <p > 《React进阶实践指南》 { this.state.number }   </p>
       <button onClick={ this.handleClick } >点赞</button>
     </div>
   }
}

react 架构大概流程

我们可以看到每个节点有child和return及sibling属性，通过这些属性我们可以把他们串联成一个链表方便循环。

render协调阶段

我们知道我们上面说的形成链表时它的行为基本是两种，如下

  1. 递阶段：首先从rootFiber开始向下深度优先遍历。为遍历到的每个Fiber节点调用beginWork方法，根据传入Fiber节点创建子Fiber节点，并将这两个Fiber节点连接起来。当遍历到叶子节点（即没有子组件的组件）时就会进入“归”阶段。
  2. 归阶段：在“归”阶段会调用completeWork处理Fiber节点，当某个Fiber节点执行完completeWork，如果其存在兄弟Fiber节点（即fiber.sibling !== null），会进入其兄弟Fiber的“递”阶段。如果不存在兄弟Fiber，会进入父级Fiber的“归”阶段。

递和归两个阶段都对应了update和mount两种情况，每种情况的处理是不一样的，递阶段的mount挂载时会创建子fiber，update时更新的fiber节点会有effectTag标记，而归阶段mount和update两种情况如下：

update

  • onClick、onChange等回调函数的注册
  • 处理style prop
  • 处理DANGEROUSLY_SET_INNER_HTML prop
  • 处理children prop

mount

  • 为Fiber节点生成对应的DOM节点
  • 将子孙DOM节点插入刚生成的DOM节点中
  • 与update逻辑中的updateHostComponent类似的处理props的过程

最后所有归的阶段结束后，就要挂载(commit)处理副作用了，这里讲下副作用:。

  1. 首先是mount的情况这会它只会在rootFiber存在Placement effectTag，，也就是说mount最后只有一个effectTag，也就是插入html片段，我们能看到上面mount归的时候会依次收集dom节点，也就是说最后就执行一个副作用effectTag，就是挂载dom
  2. 第二种就是update的情况了，递阶段的时候会给有更新的fiber标记effectTag，而归阶段完成后，如果当前fiber有更新，会在归的上层函数中把它放到effectList的单向链表里，最后到commit阶段只要依次执行effectList链表里的fiber更新就可以了。

“递”和“归”阶段会交错执行直到“归”到rootFiber。至此，render阶段的工作就结束了。如果还是不清楚的话，来这里 render阶段的递归

commit阶段

最后是进入commit，我们也找到了对应的effectList操作列表,它一共是分为三小阶段

before mutation阶段（执行DOM操作前）

  1. 处理DOM节点渲染/删除后的 autoFocus、blur逻辑
  2. 调用getSnapshotBeforeUpdate生命周期钩子
  3. 调度useEffect(异步调用的防止同步执行时阻塞浏览器渲染，你可想象你需要设置订阅和事件处理等情况，这会dom还没有挂载)

mutation阶段（执行DOM操作）

mutation阶段会遍历effectList，依次执行commitMutationEffects。该方法的主要工作为“根据effectTag调用不同的处理函数处理Fiber，也就是说在这一步根据fiber的副作用在这一步进行了对应的更新操作(增删改操作及对应fiber的useLayoutEffect函数，和fiber删除之后的对应useEffect销毁时的回调)。

layout阶段（执行DOM操作后）

在这一步就是调用class组件对应的生命周期函数，例如componentDidMount和componentDidUpdate，触发状态更新的this.setState如果赋值了第二个参数回调函数，最后就是current Fiber树切换。

我们知道componentWillUnmount会在mutation阶段执行。此时current Fiber树还指向前一次更新的Fiber树，在生命周期钩子内获取的DOM还是更新前的。

componentDidMount和componentDidUpdate会在layout阶段执行。此时current Fiber树已经指向更新后的Fiber树，在生命周期钩子内获取的DOM就是更新后的

到这里我们知道了，Reconciler阶段和Renderer阶段都做了什么，也就是说从Scheduler找出高优先级任务后就是到Reconciler开始对比筛选，如果高优先级打断了低优先级就会重新构建workInProgress树，如果没打断的话大概每5ms，会查看有没有空余时间，如果有的话就继续构建。

前面两个我们知道后，下面来讲我们的重点，优先级.

第二段

待续。。。

转载自:https://segmentfault.com/a/1190000042199370
评论
请登录