react总结随笔（二）

我们知道，React 16版本做了很大的改变，有了fiber节点的概念。那么笔者就总结一下fiber的相关知识。

React 15版本的缺陷

主流浏览器的刷新频率一般是60Hz，也就是每秒刷新60次，大概16.6ms浏览器刷新一次。
由于GUI渲染线程和JS线程是互斥的，所以JS脚本执行和浏览器布局、绘制不能同时执行。
在这16.6ms的时间里，浏览器既需要完成JS的执行，也需要完成样式的重排和重绘，如果
JS执行的时间过长，超出了16.6ms，这次刷新就没有时间执行样式布局和样式绘制了，
于是在页面上就会表现为卡顿。
React 16之前存在这样一个问题：任务一旦执行，就无法中断，js线程一直占用主线程，
导致卡顿

fiber

fiber可以理解为一个虚拟的堆栈帧，将可中断的任务拆分为多个子任务，按照优先级来自
由调度子任务，分段更新。从而将之前的同步渲染改为异步渲染，特性为时间分片和暂停。

fiber工作流程：
            1.setState等修改state操作
            2.将创建的更新加入任务队列，等待调度
            3.使用requestAnimationFrame处理高优先级任务，使用
            requestIdleCallback处理低优先级任务******在requestIdleCallback
            空闲时执行任务
            4.在根节点开始遍历，转换为FiberNode，深度优先遍历******Fiber 
            Node，并且构建WokeInProgress Tree 
            5.生成diff effectList 
            6.根据diff EffectList更新dom
            
每一个Fiber节点对应一个React element，我们调用render函数产生的结果是React 
element，而Fiber节点，由React Element创建而来。
            fiber节点存在的属性：
            1.作为静态数据结构的属性
            2.用于连接其他Fiber节点形成fiber树
            3.动态工作单元的属性
            4.调度优先级相关
            requestAnimationFrame和requestIdleCallback
            5.指向该fiber在另一次更新时对应的fiber，即current fiber和
            workInProgress fiber，通过alternate连接

下一篇写React的合成事件机制。

记录记录！