这是我参与「第五届青训营 」笔记创作活动的第10天
一、重点内容介绍：
1、React的历史与应用
2、React的设计思路
二、详细知识点
1、React的历史与应用
React的历史
- 2010年Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的React的设计。
- 2011年Jordan Walke 创造了FaxJS，也就是后来的React原型:
- 2012年在Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到使用, Jordan Walke 基于 FaxJS 的经验开发出了React
- 2014年-今天 生态大爆发，各种围绕React的新工具/新框架开始涌现
React的应用
1、前端应用开发，如Facebook,Instagram,Netflix网页版
2、移动原生应用开发，如Instagram,Discord,Oculus
3、结合Eletron进行桌面应用开发
2、React的设计思路
UI编程的痛点：
- 状态更新的时候，UI不会自动更新，需要手动调用DOM接口进行更新
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
- UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到回调地狱（callback hell）
响应式与转换式：
- 转换式系统：给定输入求解输出，如编译器，数值计算等
- 响应式系统：监听事件，由消息驱动，如监控系统监控并对UI界面更新等。
- 对于转换式系统无法完成的任务，响应式可以遇到事件，然后执行既定的回调，并更新状态和UI，即可实现效果。
响应式编程
- 状态更新，UI也会进行更新
- 前端代码组件化，可复用，可封装
- 状态之间的互相依赖关系，只需声明即可
组件化：
- 组件是 组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可以将状态等数据传入组件内部
组件设计
- 组件声明了状态和UI的映射
- 组件有Props（父组件传入的数据）/State（组件内部维护的数据）两种状态
- 组件可由其他组件拼装而成
React生命周期
- 挂载（Mounting）：插入真实DOM
- 更新（Updating）：重新渲染
- 卸载（Unmounting）：移除真实DOM
小结
通过今天的课程，我学到了什么是响应式系统，为什么会诞生响应式系统。
React作为一个经典响应式系统的发展历史和应用方向。
包括React的设计思路， 从痛点到响应式，再到组件化与生命周期。
他们能够让代码更具封装性，DOM更加容易的被操控，这也是为什么现在React这么流行的原因。
