React

官网提出的：

React是用JavaScript构建快速响应的大型Web应用程序的首选方式。它在Facebook和Instagram上的表现优秀。

由此可见，React打造的就是快速响应，但是在我们日常使用APP、浏览器的时候，会因为一些场景造成快速响应被制约：

• CPU的瓶颈：当遇到大计算量的操作或者设备性能不足导致页面掉帧卡顿。
• IO(input/output)的瓶颈: 发送网络请求以后，由于需要等待数据的返回才能进行下一步的操作导致不能快速的响应。

CPU

众所周知，主流浏览器刷新频率是60HZ，就是(1000ms / 60HZ) 就是16.6ms浏览器刷新一次。
但是，GUI渲染线程跟JS线程是互斥的，因此，JS脚本跟浏览器布局、绘制不能同时进行，而在每16.6ms内，需要完成：

JS脚本执行
样式布局
样式绘制

所以一旦JS执行时间过长，超出了16.6ms，那么这次的刷新就没有时间执行后面的程序了。

react为了解决这个问题，在浏览器每一帧的时间中，预留一些时间（预留的时间为5s）给JS线程，而React会利用这个时间更新组件，但是如果预留的时间不能执行完JS，react会把线程的控制权还给浏览器，让其有时间渲染UI，而React就等待下一帧的时间来继续被中断的工作，这个过程就被称为时间切片。

而React中要使用这个时间切片，就需要开启Concurrent Mode

// 通过使用ReactDOM.unstable_createRoot开启Concurrent Mode
ReactDOM.unstable_createRoot(rootEl).render(<App />);

所以综上所述，React解决CPU的短板问题，使用了时间切片，而时间切片的关键就是将同步的更新变成可以中断的异步更新。

IO