[前端与HTML]--响应式编程与React

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

前言

1. React的历史与应用
2. React的设计思路

---

1.React的历史与应用：

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

• 2010年Facebook在其php生态中，引入xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计
• 2011年Jordan Walke创造了FaxJS，也就是后来的React原型
• 2012年在Facebook收购Instgram后，该FaxJS项目在内部得到使用，Jordan Walke基于FaxJS的经验，创造了React
• 2013年React正式开源，在2013JSConf上Jprdan Walke介绍了这款全新的框架
• 2014年生态大爆发，各种围绕React的新工具/新框架开始涌现

2.React的设计思路：

Ui编程痛点：

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

响应式与转换式：

转换式系统（给定输入求解输出，编译器，数值计算）！=响应式系统（监听事件，消息驱动，监控系统，ui界面）

响应式系统：

graph TD
事件 --> 执行既定的回调-->状态变更    

前端Ui：

graph TD
事件 --> 执行既定的回调-->状态变更-->ui更新

响应式编程：

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

组件化：

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

组件设计：

1. 组件声明了状态和ui的映射
2. 组件有Props/State两种状态
3. "组件"可由其他组件拼接而成

组件代码的样子：

1. 组件内部拥有私有的状态State
2. 组件接受外部的Props状态提供复用性
3. 根据当前的State/Props，返回一个UI