React源码Part3——Fiber架构

React源码Part-1——代数效应：https://segmentfault.com/a/11...
React源码Part2——渲染原理： https://segmentfault.com/a/11...
React源码Part4——Render渲染(Mount阶段)：https://segmentfault.com/a/11...
React源码Part4——Render渲染(Update阶段):https://segmentfault.com/a/11...
React源码Part5——commit阶段(处理class组件生命周期)： https://segmentfault.com/a/11...
React源码Part6——Commit阶段(beforeMutation)：https://segmentfault.com/a/11...
React源码Part7——Commit(Mutation阶段)： https://segmentfault.com/a/11...
React源码Part8——Commit(Layout阶段)：https://segmentfault.com/a/11...
参考链接：React技术揭秘——https://react.iamkasong.com/p...

Fiber架构为什么会出现？

• 为了解决React15中渲染机制同步的问题，以及递归更新过程中无法中断的问题

什么是Fiber架构？

• Fiber架构的目的：践行之前提到的代数效应，实现可中断的异步机制，也就是React16中新的渲染机制

• Fiber的意义：

  1. 作为架构的意义：终结之前递归渲染问题，实现可中断的异步更新
  2. 静态数据结构：每个Fiber节点保存一个组件信息，里面有很多属性，包括组件内的数据和DOM信息，也就是虚拟DOM
  3. 动态工作单元：在更新Fiber树时会尝试使用之前节点中的数据，这就需要Fiber节点中的属性alternate属性，该属性指向旧的Fiber节点
• Fiber架构不使用async和Generator的原因是，async和await的使用具有传染性，要求父级也是promise类型；Generator也能实现可中断的异步更新，但并不能修改执行内容的优先级，所以React团队自己实现了一个Schedler调度器。

React如何更新Fiber

• React首次调用ReactDOM.render创建两个Fiber，一个叫FiberRoot和rootFiber。

  1. FiberRoot： 是React应用的节点，有且仅有一个。FiberRoot有个current指针，指针指向的rootFiber就是我们视图层看到的内容。
  2. rootFiber：是挂载带页面中的组件节点，可以有多个，也就是我们渲染的内容。
• 首次加载时会·FiberRoot的current指针指向rootFiber；当发生更新时，会创建一个新的rootFiber，这个rootFiber中的节点会尝试复用旧的fiber节点，这就需要alternate属性。当新的rootFiber节点构建完成，FiberRoot的current指针指向刚刚构建的rootFiber，视图完成更新。
• Fieber的构建、更新、更换指针指向都是发生在内存中，速度贼快～
  

什么是双缓存机制？

• 解决什么样的问题：当计算量较大时，清除上一帧到当前帧渲染完成中间出现的空白。
• 双缓存实现原理：内容的绘制和替换都放在计算机内存中，绘制完成后再替换上一帧的内容，在计算期间不清除上一帧的内容。
• 双缓存原理的应用：FiberRoot的指针指向替换过程及其rootFiebr的更新就是双缓存原理的应用

PS：什么是代数效应：https://segmentfault.com/a/11...