学习链接：https://react.iamkasong.com/preparation/idea.html#react%E7%90%86%E5%BF%B5
React是用Javascript构建快速响应的大型web应用程序的首选方式。关键是快速响应。
日常中，制约快速响应的场景：

  • 大量计算的操作或者设备性能不足使页面掉帧，导致卡顿。——CPU的瓶颈
  • 发送网络请求后，由于等待数据返回才能进一步操作导致不能快速响应。 ——IO的瓶颈

    CPU瓶颈

    ```javascript function App() { const len = 3000; return (
      {Array(len).fill(0).map((_, i) =>
    • {i}
      • )}
    ); }

const rootEl = document.querySelector(“#root”); ReactDOM.render(, rootEl);
`` 主流浏览器刷新频率是60Hz，即（1000ms/60Hz) 16.6ms浏览器刷新一次。<br />js操作DOm,GUI渲染线程与js线程互斥。所以js脚本执行与浏览器布局、绘制不能同时执行。<br />意味着，每16.6ms时间内，需要完成脚本执行——样式布局——样式绘制`，超出了16.6ms，这次刷新就没有时间执行样式布局和绘制了。
如demo中，组件数量繁多，js脚本执行时间过长，页面掉帧卡顿。

如何解决由于脚本执行时间过长，造成页面掉帧卡顿的问题？

在浏览器每一帧的时间中，预留一些时间给js线程，React利用这部分时间更新组件（源码中，初始时间是5ms)。当预留时间不够用时，React则等待下一帧时间到来继续被中断的工作。
将长任务，切分成小段任务——时间切片

IO瓶颈

如何在网络延迟客观存在的情况下，减少用户对网络延迟的感知？
React给出的答案是将人机交互研究的结果整合到真实的 UI 中

React

设计理念：快速响应
制约瓶颈：CPU与IO
解决办法：实现时间切片，时间切片的关键是将同步的更新变成可中断的异步更新。