响应式系统和react

react的设计思路

用原生的JS写UI大概会遇到三个痛点

• 1.状态更新，UI 不会自动更新，需要手动地调用 DOM进行更新。
• 2.欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
• 3.UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell“

响应式系统

监听事件，消息驱动，比如：监控系统、UI界面

前端UI

事件————>执行既定的回调———>状态变更————>UI更新

• 01.状态更新，UI自动更新。
• 02.前端代码组件化，可复用，可封装。
• 03.状态之间的互相依赖关系，只需声明即可。 关于组件
• 1.组件是 组件的组合/原子组件
• 2.组件内拥有状态，外部不可见
• 3.父组件可将状态传入组件内部

组件化

组件设计

• 1.组件声明了状态和UI的映射。
• 2.组件有 Props/ State 两种状态。
• 3.“组件"可由其他组件拼装而成。
• 组件内部拥有私有状态 State。
• 组件接受外部的Props 状态提供复用性。
• 根据当前的 State /Props，返回一个UI。

React的实现

Virtual DOM （虚拟 DOM) virtual DOM是一种用于和真实DOM 同步，而在 JS内存中维护的一个对象，它具有和DOM 类似的树状结构，并和DOM 可以建立一一对应的关系。它赋予了 React 声明式的 Ap1：您告诉React 希望让UI是什么状态，React 就确保DOM 匹配该状态。这使您可以从属性操作、事件处理和手动DOM 更新这些在构建应用程序时必要的操作中解放来。

How to Diff？

更新次数少<----Tradeoff---->计算速度快

完美的最小 Diff 算法，需要 O(n^3）的复杂度。 牺牲理论最小 Diff，换取时间，得到了O（n）复杂度的算法： Heuristic O(n) Algorithm

不同类型的元素	替换
同类型的 DOM 元素	更新
同类型的组件元素	递归

React状态管理库

核心思想：将状态抽离到UI外部进行统一管理

状态机：当前状态，收到外部事件，迁移到下一个状态。