React 原理

[dailynodejs]

requestIdleCallback

在浏览器一帧的剩余空闲时间内执行优先度相对较低的任务，一般按先进先调用的顺序执行

语法

var handle = window.requestIdleCallback(callback[, options])

缺陷

is called only 20 times per second - Chrome on my 6x2 core Linux machine, it's not really useful for UI work。—— from Releasing Suspense

与 requestAnimationFrame 区别？

requestAnimationFrame 回调会在每一帧确定执行，属于高优先级任务。

如图：

可以执行 DOM 修改吗？

不建议，在 requestAnimationFrame 里面进行

Promise resolve 可以放到里面吗？

不建议

兼容版本源码

地址：https://github.com/santiagogil/request-idle-callback/blob/master/index.js

var requestIdleCallback = function (cb) {
    if (global.requestIdleCallback) return global.requestIdleCallback(cb)
    var start = Date.now();
    return setTimeout(function () {
      cb({
        didTimeout: false,
        timeRemaining: function () {
          return Math.max(0, 50 - (Date.now() - start));
        }
      });
    }, 1);
  }

var cancelIdleCallback = function (id) {
  if (global.cancelIdleCallback) return global.cancelIdleCallback(id)
   return clearTimeout(id);
}

exports.requestIdleCallback = requestIdleCallback
exports.cancelIdleCallback = cancelIdleCallback

参考链接

• MDN - requestIdleCallback
• 17年的老文章
• 你应该知道的requestIdleCallback
• 你不知道的 requestIdleCallback

[dailynodejs]

render

创建 fiber 的过程

1、为每个节点创建新的 fiber，生成一颗有新状态的 workInProgress 树 2、初次渲染的时候，会将这个 fiber 创建真实的 dom 实例，并且对当前节点的子节点进行插入 3、如果不是初次渲染，对比新旧的 fiber 状态，产生跟新的 fiber 节点，最终通过链表的形式挂载到 RootFiber 4、初次渲染还是 setState，每次更新总是从 root 开始遍历

commit

真正操作页面的阶段

1、执行生命周期 2、从 RootFiber 上获取那条链表，根据链表上的标识操作界面