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

本堂课重点内容

1. React的历史与应用
2. React的设计思路
3. React（hook）的写法
4. React的实现
5. React状态管理库
6. 应用级框架科普

React的历史与应用

2010年，Facebook在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了React的设计，2012年FaxJS项目在Ins内部得到应用，Jordan Walke基于FaxJS创造了React。2013年React正式开源，并在之后直到今天出现了各种围绕React的新工具和新框架。

React的应用也非常广泛，可以应用在前端应用的开发，移动原生应用的开发，也可以结合Electron进行桌面应用的开发。

React的设计思路

UI编程的痛点：

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

React解决：

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

响应式系统：

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

前端UI：

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


Virtual DOM

Virtual DOM 是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的梳妆结构，并和DOM可以建立一一对应的的关系

这个链接可以让你更清晰的了解什么是虚拟DOM

React状态管理库

核心思想：将状态抽离到UI外部进行统一管理

状态机：当前状态收到外部事件，迁移到下一个状态