一、前言
最近在读react v16的源码，准备写一些东西记录一下成果，仅供参考。
距离react v16版本发布已经有一段时间了，很多人对fiber已经有了初步的认识，对于fiber解决的问题也大致了解。此文主要是解释fiber是什么东西以及fiber的工作原理，并不涉及fiber解决什么问题的细节。因为众所周知，fiber概念的引入是为了解决react同步更新性能的问题，但是fiber只是其中的一部分，如果要细说react如何实现异步更新，涉及内容较多，一篇记录性的文章是不能表达清楚。
二、fiber概念
fiber是个什么东西？因为English是国外程序员的母语，所以他们对代码中的命名都是有考究。fiber意思是纤程，大家都知道进程、线程，纤程是较线程更细的东西。因为JS是单线程的，所以从这个角度分析，fiber的命名是很有考究的。
以上是fiber概念，在代码中fiber是什么呢？其实fiber就是一个类似双向链表的数据结构。如下图:
reactDom会根据jsx，为每个dom节点生成一个fiber节点，(注意：当textNode是唯一的子节点时，不会单独生成fiber节点)，child指向第一个子节点，sibling指向下一个兄弟节点，return指向父节点。这样的数据结构就是fiber数据结构，当然fiber中还有存储了其他数据，此文这里不涉及到，所以不展开。
三、fiber工作原理
已经了解了fiber的数据结构，那么fiber是如何在react异步可中断的更新中发挥作用的呢?
首先我们先看下原来react虚拟dom(v16之前版本)为什么支持不了可中断的更新，首先我们假设虚拟都没可以中断(实际不可中断)，比如以下代码
// 更新前
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
// 更新一
<ul>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
我们把123更新为234(更新一)，在更新过程中，当1->2, 2->3完成时被中断了，3没有变成4，那么结果就是233，这就产生了bug。
react v16解决的方式是双缓存技术，即在更新时，react存储两个fiber数据结构，如下图：
上图中，rootFiber是react应用，footFiberNode是应用挂在的节点，current指向的fiber是渲染在页面中的fiber(即出现在屏幕中的视图)，我们称它未current fiber，current fiber的每一个fiber节点都有一个alternode指向另一个棵树的相同fiber节点，我们称这个fiber为workInProgress fiber。
我们知道，当react v16前的版本更新时，会进行jsx和虚拟dom树进行diff算法，计算结果就是最终需要更新的视图。而在react v16 diff算法是将jsx和workInProgress fiber进行计算，最终得出最终视图，然后将current指针指向workInProgress fiber，渲染新的视图。跟workInProgress fiber进行diff算法是在内存中进行的，即使被中断也对现有视图不产生影响。
四、扩展
通过上文我们知道了，react是通过双缓存技术来实现可中断的更新，那么为什么不用原本的架构(虚拟dom)来做双缓存呢?原因中个人觉得以下两点最为关键：
1. fiber是典型以空间换时间，提高运行效率
2. fiber的出现是实现function component及hook（state数据持久化）的关键
