React 是 Facebook 在 2013 年开源的一款前端框架，可以做前端网页，移动原生应用开发，和桌面应用开发。

一、React的设计与实现

1、响应式编程

①状态更新，UI自动更新。

“状态更新，UI不会自动更新，需要手动地调用DOM进行更新。”

②前端代码组件化，可复用，可封装。

“欠缺基本的代码层面的封装和隔离，代码层面没有组件化。”

③状态之间的互相依赖关系，只需声明即可。

“UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。”

2、组件化

（1）总结：

①组件是组件的组合/原子组件；

②组件内拥有状态，外部不可见；

③父组件可将状态传入组件内部。

（2）组件设计：

①组件声明了状态和UI的映射；

②组件有Props/State 两种状态；

③“组件”可由其他组件拼装而成。

（3）组件代码会是什么样子：

①组件内部拥有私有状态State；

②组件接受外部的 Props 状态提供复用性；

③根据当前的State/Props，返回一个UI。

二、React （hooks）的写法

代码示例：

改变count不是直接进行改变，而是手动的调用[count，setCount]

react封装一层，不可以直接进行+1。

三、React 实现

Problems

1、JSX不符合JS标准语法。

2、返回的JSX发生改变时，如何更新DOM。

Virtual DOM ( 虚拟DOM)：Virtual DOM是一-种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立对应的关系。

它赋予了React 声明式的API: 您告诉React希望让∪I是什么状态，React 就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

3、State/Props更新时，要状态/道具更新时，要重新触发render函数，重新触发渲染函数。

4、How to Diff?

更新次数少←→计算速度快

完美的最小Diff算法，需要O(n^3)的复杂度。

牺牲理论最小Diff,换取时间，得到了0 (n)复杂度的算法: Heuristic O(n) Algorithm

①不同类型的元素：替换

②同类型的DOM元素：更新

③同类型的组件元素：递归

四、React状态管理库

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

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