30.精读JS事件循环和异步.md

030.精读《Javascript 事件循环与异步》.md

JS 中 EventLoop 就像 JS 的一门内科，了解其原理对 setTimeout 和 Promise 这些基础概念刚好理解，从浏览器底层流程开始吧。

Event Loop 宿主环境 js 线程三者关系

• browser console --> Call Stack --> Web APIs(host enviorment) --> callback queue(task queue) --> Event Loop

• 所有同步代码都会存在调用栈中，只有异步代码才会进入事件循环，异步代码如

  DOM API
  setTimeout()
  setInterval()
  Promise.resolve().then()
  fetch().then()
  

  • 异步代码执行时，不会进入调用栈，而是进入事件循环队列(延迟队列),等待 js 主线程执行完成后，到达检查点(异步时机),将异步回调中的代码推进调用栈中执行

MicroTask and MacroTask

• setTimeout 宏任务， promise 之流微任务
• 异步队列也是循环执行的，可以看做二维数组， 横排是一个队列中的每一个函数， 纵排是每一个队列
• 宏任务将执行函数添加到新的纵排，而微任务将执行函数添加到当前执行到的队列横排，所以微任务插入式最轻量最快执行的

React componentWillMount 在微任务执行时机 setState 不会触发 rerender(异步)

summary

• 理解事件循环才是第一步， 对 React 生命周期异步 setState 合并机制才能好好理解