React Fiber 机制

前言

React Fiber  机制是16版本性能重大提升的关键，也是react 面试的核心问题；

一、React 的工作流程

React渲染页面的两个阶段

• 调和阶段（reconciliation）：在这个阶段 React 会更新数据生成新的 Virtual DOM，然后通过Diff算法，快速找出需要更新的元素，放到更新队列中去，得到新的更新队列，以及记录commit 阶段将要执行的生命周期函数。
• 渲染阶段（commit）：这个阶段 React 会遍历更新队列，将其所有的变更一次性更新到DOM上，并执行上一步调和阶段记录的生命周期函数。
  
  
  React15架构可以分为两层：
• Reconciler（协调器）—— 负责找出变化的组件；
• Renderer（渲染器）—— 负责将变化的组件渲染到页面上；

  在React15及以前，Reconciler采用递归的方式创建虚拟DOM，递归过程是不能中断的。如果组件树的层级很深，递归会占用线程很多时间，递归更新时间超过了16ms，用户交互就会卡顿。

React16架构可以分为三层：

从v15到v16，React团队花了两年时间将源码架构中的Stack Reconciler重构为Fiber Reconciler 也即React 的Fiber 机制

• Scheduler（调度器）——