React设计理念

1.设计理念

React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式
什么原因制约快速响应？

• 计算能力：CPU
• 网络延迟：IO

React处理计算能力制约快速响应的方法：
主流浏览器的刷新频率为60hz，也就相当于每16.6ms浏览器刷新一次，当渲染的节点超过16.6ms时就会出现掉帧的情况。
例如在文本框内输入字符实时相应渲染，当渲染不及时就会出现卡顿的现象，一般采用防抖节流的方式去处理，防抖就是隔一段时间的输入才会触发更新，节流就是限制用户更新的频率。
两者本质上都是通过限制触发更新的频率来减少掉帧的可能。
react采取异步更新的方式，处理数据更新，当当前的操作超过浏览器预留的更新时间后，数据会被安排在下一次更新，减少掉帧的可能性。

React处理网络延迟制约快速相应的方法：
框架层面实现异步更新机制

总结：
React设计理念：快速响应
制约瓶颈：CPU和IO
解决办法：异步可中断更新

2. 架构的演进史

老的React架构（React15）主要分成两个模块

• 决定渲染什么组件：Reconciler 协调器
• 将组件渲染到视图中：Renderer 渲染器

由于老的React架构采取的是同步渲染，当页面发生中断之后，页面渲染的数据就会出现错误，不能满足快速响应的里面，因此采用新的React架构
新的React（React16）架构主要分成三个模块

• 调度更新：Scheduler 调度器
• 决定需要更新什么组件： Reconciler 协调器
• 将组建更新到视图中：Renderer 渲染器

1.4 React新架构-Fiber

代数效应：代数效应是函数式编程中的概念，用于将副作用从函数调用中分离，使函数关注点保持纯粹，在react中最明显的就是hooks，像useState我们不需要去知道state在component中如何被保存，react已经帮助我们实现好了，我们要做的只是使用它们完成业务逻辑。
设计Fiber的意义：

• 中断的更新可以继续
• 更新可以拥有不同的优先级

代数效应与generator：
虽然说generator可以将渲染从同步更新变为可中断的异步更新，但是并不能完成对于优先级别更高的任务的执行
代数效应与fiber：
fiber就是代数效应在js的实现过程。
react fiber是react内部的一套状态更新机制，支持任务优先级，可中断，并可恢复。具体到每个节点比如文本节点，元素节点都是fiber节点。

Render阶段

Commit阶段

Diff算法

状态更新

生命周期

Hooks

异步调度