React-fiber

[runzhq]

fiber

出现的目的：为react加入调度(策略)的思想，被调度的任务单元即为fiber。

• 暂停任务并能够在之后恢复任务。
• 为不同的任务设置不同的优先级。
• 重新使用之前完成的任务。
• 如果不在需要则可以终止一个任务。

依赖于浏览器的 requestIdleCallback和requestAnimationFrame两个API。

1. requestIdleCallback回调的执行的前提条件是当前浏览器处于空闲状态，属于低优先级任务。第二个配置参数timeout。
2. requestAnimationFrame的回调会在每一帧确定执行，属于高优先级任务。

FPS:frams per second(每秒传输帧数)
推荐的做法是在requestAnimationFrame里面做dom的修改，可以在requestIdleCallback里面构建Document Fragment，然后在下一帧的requestAnimationFrame里面应用Fragment。

fiber是一个虚拟栈帧

一个 fiber 是一个包含了组件及其输入输出的 JavaScript 对象。 一个 fiber 对应于一个栈帧，但是它也对应与一个组件的实例。

• type and key
• child and sibling
  描述了 fiber 构成的递归结构的树。render 方法返回多个子元素的情况
• return
  程序处理完当前 fiber 后应该返回 fiber。
• pendingProps and memoizedProps
  pendingProps 是 fiber 执行开始时的属性集合，memoizedProps 则是 fiber 执行结束时的属性集合。
• pendingWorkPriority
  一个用来表示 fiber 代表的任务优先级的数字
• alternate
• output