React学习笔记1：React理念

原文链接

之前我在学校一直是Vue2的学习者，反复阅读过Vue2的文档，但实际上我并没有细读过Vue的源码，现在进入公司后主要使用的React Hooks作为开发框架，越学到后面越觉得自己作为一个前端工程师只学到了皮毛，刚好现在公司有双休了，抽一些学习React源码，为自己日后的进阶做准备。

感谢大神卡颂的开源电子书《React技术揭秘》，我准备每学一节就写一篇笔记，同时穿插一些其他的React源码文章的学习笔记，本章原文链接：https://react.iamkasong.com/preparation/idea.html

React的理念

实现快速响应

制约的瓶颈

1. CPU的瓶颈
2. IO的瓶颈

CPU的瓶颈

原因

当遇到大计算量的操作或者设备性能不足使页面掉帧，导致卡顿。

JS在操作DOM过程中，GUI渲染线程与JS线程是互斥的。JS脚本执行和浏览器布局、绘制不能同时执行。

在每1帧（一般为16.67ms）的时间内，需要完成如下工作：

如果计算量大导致JS脚本执行时间过长，则这一帧刷新就不会执行样式布局和样式绘制，具体的体验就是交互掉帧、卡顿。

解决方式

时间切片

原理

在每一帧的时间中，仅预留一些时间给JS脚本执行（在源码中，预留的初始时间是5ms），剩余的时间用于样式布局和样式绘制。当预留的时间不够用时，React则等待下一帧时间继续被中断的工作，类似操作系统中的时间切片原理。

IO的瓶颈

原因

发送网络请求后，由于需要等待数据返回才能进一步操作导致不能快速响应。

这实际上是一个同步操作：

如果等待时间过长，就会导致页面卡住。

解决方式

将人机交互研究的结果整合到真实的 UI 中

原理

1. 如果等待响应的时间够短，可以停留在当前页面，等得到数据后再刷新页面，此时用户是无感知的。
2. 如果请求时间超过一个范围，显示loading的效果表示加载中。

关键

将同步的更新变为可中断的异步更新。