响应式系统与React | 青训营笔记

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

这节前端青训营的课程老师讲解了一下响应式系统与React等相关的知识，一下是我的一些课堂笔记。

课程大致内容

1. React的历史以及其应用
2. React的设计思路
3. React(hooks)的写法
4. React的实现
5. React状态管理库
6. 应用级框架科普

React的历史以及其应用：

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

React的设计思路--响应式与转换式

1. 转换式系统：给定输入求解输出，例如编译器以及数值计算
2. 响应式系统：监听事件，消息驱动，监控系统，UI界面

注意：这二者设计思路是不能划等号的！！

React的设计与实现--组件化

总结：

1. React中，组件时组件的组合/原子组件
2. 组件内拥有状态，外部不可见
3. 父组件可以将状态等数据传入组件内部，例如父子组件之间的传值

React的设计思路--生命周期

组件的生命周期可分成三个状态：

• Mounting(挂载)：已插入真实 DOM
• Updating(更新)：正在被重新渲染
• Unmounting(卸载)：已移出真实 DOM

React的实现--Problem

Virtual DOM(虚拟DOM) 虚拟DOM是一个用于和真实DOM同步，而在JS内存中维护的一个对象，它具有DOM类似的树状结构，并和DOM可以建立一一对应的关系。它赋予了React声明式的API：你告诉React希望让UI是什么状态，React就确保DOM匹配该状态，这时你可以从属性操作，事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来，简单来说就是React可以不用直接去操纵DOM，而是去操纵虚拟DOM，从而达到同样的效果。