react理念(二)

react-fiber

虚拟dom在react16中称为fiber。

起源

在react15之前，协调器采用递归的方式来创建dom，递归的过程是不能中断的，如果组件书的层级很深，递归会占用线程很多时间，造成卡顿。为了解决这个问题，react16将递归的无法中断的更新重构为异步的可中断的更新。

fiber

1. 作为架构来说，react15的协调器使用递归的方式执行，数据保存在递归调用栈中，被称为stack reconciler, 在react16中，被成为fiber reconciber。
2. 作为静态的数据结构来说，每个fiber节点对应的react元素，保存了组件的类型，对应的dom节点等信息。
3. 作为动态的工作单元来说，每个fiber节点保存了本次更新中该组件改变的状态，要执行的工作。

结构

每个fiber节点有对应的react element，多个fiber节点会形成树。

// 指向父级fiber节点
this.return = null
// 指向子fiber节点
this.child = null
// 指向右边的第一个兄弟fiber节点
this.sibling = null