架构图解_React16源码解析(一)- 图解Fiber架构

原文链接：https://segmentfault.com/a/1190000020736966

React源码解析系列文章欢迎阅读：

React16源码解析(一)- 图解Fiber架构

React16源码解析(二)-创建更新

React16源码解析(三)-ExpirationTime

React16源码解析(四)-Scheduler

React16源码解析(五)-更新流程渲染阶段1

React16源码解析(六)-更新流程渲染阶段2

React16源码解析(七)-更新流程渲染阶段3

React16源码解析(八)-更新流程提交阶段

正在更新中...

老的react架构从setState到render完成，整个过程是主要霸占主线程的。如果组件比较大，或者有些复杂的逻辑，长时间占用主线程，会导致一些input框输入操作、动画等得不到响应，从而表现出页面卡顿。

为了解决上述的问题，React引入了一个全新的异步渲染架构：Fiber。

概述

这是React 核心算法的一次大的更新，重写了 React 的 reconciliation 算法。reconciliation 算法是用来更新并且渲染DOM树的算法。以前React 15.x的版本使用的算法称为“stack reconciliation”，现在称为“fiber reconciler”。

fiber reconciler主要的特点是可以把更新流程拆分成一个一个的小的单元进行更新，并且可以中断，转而去执行高优先级的任务或者浏览器的动画渲染等，等主线程空闲了再继续执行更新。

另外的新功能：

1、render方法可以返回多元素（即可以返回数组）

2、支持异常边界处理异常；

Fiber Tree

为了达到上述的效果，react将底层更新单元的数据结