这是我参与「第四届青训营 」笔记创作活动的的第10天。

React设计思路

UI编程缺陷

• 当状态更新时，UI不会跟随状态自动更新，需要手动调用DOM操作进行更新。
• 欠缺基本代码层面的封装和隔离，代码层面没有组件化。
• UI与数据的依赖关系需要手动维护，当维护的链路过长可以会产生回调地狱。

响应式与转换式

转换式系统：给定输入解出输出（编译器、数值计算等）
响应式系统：监听事件、消息驱动（监控系统、UI界面等）

响应式编程的优点

• 状态更新时UI会自动跟随状态进行更新。
• 对代码进行组件化开发，可以进行封装和复用。
• 状态之间的依赖关系不需要进行手动维护仅需声明即可。

状态归属

• 当组件需要共享状态时，不能将所有状态均放入父组件中。
• 将具有局部性的状态尽量放在一起，提高代码聚合性。

组件化

组件设计

1. 组件声明了状态和UI的映射关系
2. 组件拥有Props/State两种状态
3. 组件可以由其他组件组成

React实现

虚拟DOM

• 虚拟DOM是一种用于和真实DOM同步在JS内存中维护的一个对象，它具有和真实DOM类似的树结构，并和真实DOM建立一一对应的关系。
• 虚拟DOM赋予了React声明式的API，使开发者可以从属性操作、事件处理和手动操作DOM中解放出来。

比较算法（Diff）

比较算法需要在减少更新次数和提升计算速度中进行权衡。
完美的最小Diff算法，需要O(n^3)的复杂度。
牺牲理论最小Diff，换取时间，得到O(n)复杂度的算法。

策略

1. 对不同类型的元素进行替换
2. 更新同类型的DOM元素
3. 递归调用同类型的组件元素

React状态管理

思想：将状态抽离到UI外部进行统一管理。
状态机：当收到外部事件时，将当前状态迁移到下一个状态。