这是我参与「第五届青训营 」笔记创作活动的第6天
一、本堂课重点内容：
- React的历史与应用
- React的设计思路
- React（hooks）的写法
- React的实现
- React状态管理库
- 应用级框架科普
二、详细知识点介绍：
2.1 React的历史与应用
应用：
- 前端应用开发：如Facebook、Netflix网页版
- 移动端原生应用：如Android、IOS的app
- 桌面应用开发：如Electron
历史：
- 2010年 Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的React的设计
- 2011年 Jordan Walke 创造了FaxJS，也就是后来的React原型
- 2012年在Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到使用, Jordan Walke 基于 FaxJS 的经验开发出了React
- 2014年-今天 生态大爆发，各种围绕React的新工具/新框架开始涌现
2.2 React的设计思路
响应式与转换式系统:
转换式系统：给定输入求解输出,例如 编译器、数值计算
响应式系统：监听事件消息驱动,例如 实时监控系统、UI界面
转换式系统 ≠ 响应式系统
响应式编程:
- 状态更新，UI自动更新
- 前端代码组件化，可复用，可封装
- 状态之间的相互依赖关系，只需声明即可
组件化:
- 组件是 组件的组合 / 原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
组件设计:
- 组件声明了状态和UI的映射
- 组件有 Props/State 两种状态
- "组件"可由其他组件拼装而成
生命周期:
1.Mounting 挂载时 2.Updating 更新时 3.Unmounting 销毁时
2.3 React（hooks）的写法
1.useEffect() 副作用 hock 一般只执行一次
2.useState() 更改状态 hock
2.4 React的实现
存在的问题： a. JSX不符合JS标准语法 b. 返回的JSX发生改变时，如何更新DOM c. State / Props更新时，要重新触发render函数 d. 虚拟DOM
解决：
- 语法只是虚拟的,最终会进行转义最后还是会转义成JavaScript语法
- 使用 虚拟DOM树 虚拟DOM树和真实的DOM树会建立一一对应的关系,当虚拟DOM树发生改变时,React会确保真实的DOM也发生相应的改变
- React 使用了 diff 算法,来查找改变的DOM节点
2.5 React状态管理库
⚠️ 核心思想：将状态抽离到UI外部进行统一管理
2.6 应用级框架科普
next.js / Blitz / Modern.js
三、课后个人总结：
了解了react的相关基础知识
五、引用参考：
