响应式系统与 React｜青训营笔记

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

React的历史与应用

应用

1. 前端应用开发，如 Facebook，Instagram，Netflix 网页版。
2. 移动原生应用开发，如 Instagram，Discord，Oculus。
3. 结合Electron，进行桌面应用开发。

历史

1. 2010，xhp 框架的组合式组件思想，启发了后来的React的设计。
2. 2011，React 原型产生
3. 2013，React 正式开源
4. 2014- 各种围绕React的新工具/新框架开始涌现

React设计思路

UI编程痛点

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

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

我们的需求

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

组件化

1. 组件是组件的组合/原子组件。
2. 组件内部拥有状态，外部不可见。
3. 父组件可将状态传入组件内部。

Virtual DOM（虚拟 DOM）

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

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

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

个人总结

本次课程主要介绍了 react 的知识，主要科普了 react 的实现思路以及背景，对以后深入学习做一个铺垫。