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

重点内容：

React的历史与应用

• 前端应用开发历程
• 移动原生应用开发
• 结合 Electron 的桌面应用开发

React的设计思路

• UI 编程痛点
• 响应式与转换式
• React 设计与实现 - 组件化
• React 设计与实现 – 状态归属问题
• React 设计与实现 – 生命周期

1、React的历史与应用

react应用

• 前端应用开发，如Facebook,Instagram,Netflix网页版
• 移动原生应用开发，如Instagram,Discord,Oculus
• 结合Eletron进行桌面应用开发

react 发展

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

2、React的设计思路

UI编程的痛点：

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

响应式与转换式

• 转换式系统：给定输入求解输出，如编译器，数值计算等
• 响应式系统：监听事件，由消息驱动，如监控系统监控并对UI界面更新等。
• 对于转换式系统无法完成的任务，响应式可以遇到事件，然后执行既定的回调，并更新状态和UI，即可实现效果。

响应式编程

• 状态更新，UI也会进行更新
  • 状态更新，ui不会自动更新，需要手动地调用DOM进行更新
• 前端代码组件化，可复用，可封装
  • 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
• 状态之间的互相依赖关系，只需声明即可
  • UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到回调地狱“callback hell”

组件化：

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

组件设计

• 组件声明了状态和UI的映射
• 组件有Props（父组件传入的数据）/State（组件内部维护的数据）两种状态
• 组件可由其他组件拼装而成

Virtual DOM

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

总结

通过今天的课程，了解什么是响应式系统，对React有了清楚的认识，对它的发展历史和应用方向， 包括React的设计思路等都有了了解，获益匪浅。