10. 响应式系统与React

1. React历史与应用

• 前端应用开发，Facebook、Instagram、Netfix网页版
• 移动原生应用开发，如Instagram
• 桌面应用开发，结合Electron

2011年，Jordan Walke创造了FaxJS，也就是React的原型：

2013年，React正式开源；

2. React的设计思路

UI编程痛点

1. 状态更新，UI不会自动更新，需要手动调用DOM进行更新；
2. 欠缺代码层面的封装和隔离
3. UI之间的数据依赖关系，需要手动维护，如果依赖路比较长，会有“callback hell”

响应式编程

1. 状态更新：UI自动更新
2. 前端代码组件化，可复用，可封装
3. 状态之间的互相依赖关系，只需声明即可

组件化举例

总结：

• 组件是组件的组合/原子组件
• 组件内拥有状态，外部不可见
• 父组件可将状态传入组件内部

图中的状态[当前价格]属于Root节点；

改变当前手机价格时，从父组件传函数到子组件中的过程：

状态归属问题

1. React是单向数据流还是双向数据流

答：是单向的，如图所示是从父组件传到子组件一个函数，而并没有对父组件传状态；但是可以改变父组件的状态；

2. 如何解决状态不合理上的问题？ 略
3. 组建的状态改变后，如何更新DOM？ 略

组件设计

1. 组件声明了状态和UI的映射
2. 组件有Props(外部)/State(内部)的状态；
3. “组件”可由其他组件拼装而成

生命周期

Hooks实例

useEffect()：副作用，改变了外部变量的函数，无需每次状态更新就更新

3. React的实现 - Problems

1. JSX不符合JS的标准

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

虚拟DOM：

Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，具有和DOM类似的树状结构；

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

牺牲理论最小Diff，得到O(n)复杂度的算法

3. 当state/Props更新时，要重新触发render函数

4. React状态管理库

将状态抽离到UI外部进行统一管理

问题：组件依赖于外部的库，耦合度过高

• redux
• xstate
• mobx
• recoil