这是我参与「第五届青训营」伴学笔记创作活动的第 5 天
一、本堂课重点内容：
React 的历史与应用
- 前端应用开发历程
- 移动原生应用开发
- 结合 Electron 的桌面应用开发
React 的设计思路
- UI 编程痛点
- 响应式与转换式
- React 设计与实现 - 组件化
- React 设计与实现 – 状态归属问题
- React 设计与实现 – 生命周期
二、详细知识点介绍：
React 的历史与应用
React的历史
2010年Facebook在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的 React 的设计。
2011年Jordan Walke创造了FaxJS，也就是后来的React原型
2012年在Facebook收购nstagram后，该FaxJS项目在内部得到使用，Jordan Walke基于 FaxJS的经验，创造了React
2013年React正式开源，在2013JSConf上Jordan Walke介绍了这款全新的框架
2014年到今天生态大爆发，各种围绕React的新工具/新框架开始涌现
React的应用
- 可以用于前端应用的开发，具体指代一些网页版的应用，例如Facebook、instagram、Netflix的网页版的开发便使用了react框架。
- 可以用于移动原生应用开发，就是我们常见的移动端的APP，例如instagram和Oculus、Discord。
- 结合Electron可以进行桌面应用开发，我们平时使用电脑时的一些桌面应用便是使用React开发的。
React 的设计思路
UI 编程痛点
在使用原生JS来编写UI时还有一些不足的地方，比如就有这么几个痛点： 1.自己声明的变量，当他们需要更新的时候，UI无法自动更新，要手动地去调用DOM接口来进行更新才能更新UI。 2.原生JS缺少了组件化的概念，没有对代码层面进行封装和隔离，缺少了组件化，这样也不利于写代码的效率。 3.UI有很多数据依赖关系，使用原生JS就需要手动去维护。当依赖链路过长的时候，会遇到“Callback Hell”。
响应式与转换式
响应式系统：监听事件，消息驱动、监控系统、UI界面
响应式编程：解决UI编程的几个痛点，能够让状态更新的时候UI自动更新；前端代码能够组件化，可以复用，提高效率；状态之间的互相依赖关系只需声明即可，减少手动维护。
转换式系统：给定【输入】求解【输出】、编译器、数值计算
组件化
将页面拆分成一个一个的组件，通过调用组件来形成最后的页面，在其他页面也可以复用其中的组件，减少了代码的重复。
总结：组件是组件的组合，也可以说是原子组件；组件内拥有状态，外部无法看见；父组件可以把状态传入到组件内部。
三、课后个人总结：
在本节课中，了解了React的历史、应用和设计思路。当我们使用一个工具的时候，要明白这个工具为何会诞生，才能理解他使用至今的意义何在，这有利于我们去学习一个新的知识；而了解应用能够提高实践能力，如果只知道知识不会应用也是不够的。在了解的React的设计思路后，我对原生JS的一些缺陷也有了了解，对JS有了更进一步的了解，而对React也更加清楚，知道它是为何而生，使用他的意义何在。
