react fiber学习

什么是react fiber(更新中)

fiber是react 16中新的协调引擎，它的主要目标是增量渲染虚拟dom: 能够将渲染工作拆分为多个块并将其分散到多个帧中；
Let’s fall in love with React Fiber
每个react-element对应一个fiber节点
包含的属性：
child
sibling
return
用于串联应用的节点，实际为dfs的过程；

react fiber之前

应用程序更新，React将反复执行创建虚拟结果的过程。 每次，它都会将前一个虚拟树与下一个虚拟树进行比较。
至此， 如果要渲染到DOM，则可能是一个元素上只有一个类被更改。 React将遍历虚拟树，查找已更改的内容，并尽可能少地进行更新。
fiber之前，渲染引擎开始工作，即使用户打字，浏览器停滞或者是宇宙爆炸，渲染引擎都不会停下来；

fiber是怎样高效工作的？

fiber将树计算分解为可以随时commit的工作单元。 工作单元代表组件树中的节点；
fiber后，React可以暂停，恢复和重新启动组件上的工作。 这意味着某些生命周期挂钩可能会触发多次。
componentWillMount
componentWillUpdate
componentWillReceiveProps
将会调用多次，因此在这些函数中不应该进行side effect操作
componentDidMount
componentDidUpdate
中可以进行side effect操作

React可以有一个基于优先级的更新系统，这使得React团队可以微调渲染器，使得react在大多数场景下渲染最快。
{tag: trype:}
ReactWorkTags
dfs

如何重用fiber？

怎样进行任务优先级排序？

时间计算？

如何重新回到中断任务？

react-dom-render

创建ReactRoot
FiberRoot RootFiber 重要的概念
创建更新
进入调度 使用调度器
服务端渲染，使用hydrate
和render唯一的不同的不同是fiorceHydrate的值
使用Root_ATTribute_Name标示是否有服务端渲染；
DOMRenderer.unbatchedUpdates //批量更新中更新全局变量
compudateExpirationForFiber //计算过程
enqueueUpdate
scheduleWork // 开始任务调度 有更新产生
update = createUpdate（expirationTime）
提供了任务优先级概念，在同一时间有各种不同优先级任务在应用中，有工具去调度；

fiber相关的概念

current workInprogress
当前的，进行更新的
渲染完成之后会交换位置，复制过程，创建Object消耗性能，这种技术称为double buffer