关于响应式系统与React | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第6天，关于响应式系统与React的相关知识点整理如下：

React的历史与应用

前端应用开发，如Facebook、Instagram、Netflix网页版

移动原生应用开发，如Instagram、Discord、Oculus

结合Electron，进行桌面应用开发

  2010年，Facebook在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计。

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

  2012年，在Facebook收购Instagram后，该FaxJS项目在内部得到使用Jordan walke基于FaxJS的经验，创造了React

  2013年，React正式开源，在2013 JSConf上Jordan walke介绍了这款全新的框架：

2014年-今天，生态大爆发，各种围绕React的新工具/新框架开始涌现：

React的设计思路

ui编程痛点：

• 状态更新，UI不会自动更新，需要手动的调用DOM进行更新

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

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

响应式与转换式：

响应式编程：

前端UI

• 状态更新，UI自动更新

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

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

React（hooks）的写法

useState()：

useEffect()：

React的实现

How to Diff?

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

总结

  本堂课了解了什么是响应式系统并利用React介绍了响应式系统的基本原理，理解了响应式系统的架构及优点。