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

「响应式系统与 React」

React应用：

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

React的设计思路

UI痛点：

1. 状态更新，UI不会自动更新，需要手动调用dom更新
2. 欠缺基本代码层面的封装和隔离，代码层面没有组件化
3. UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会出现回调地狱

响应式编程

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

组件化

1. 组件是组件的组合/原子组件
2. 组件内拥有状态，外部不可见
3. 父组件可将状态传入组件内部

React的实现

问题：

1. JSX语法不符合JS标准
2. 返回的JSX改变时，如何更新dom
3. state与props更新时，要重新调用Render函数

解决1：

对JSX语法进行语意转化，将JSX转化成符合js的语法格式

解决2：

使用虚拟dom：

虚拟Dom是一种用于和真实dom同步，而在js内存中维护的一个对象，它具有和dom一样的树状结构，并且和真实dom建立一一对应的关系

如何进行diff算法：

1. 不同类型的元素：替换
2. 同类型的DOM元素：更新
3. 同类型的组件元素：递归

React的状态管理库

组件状态管理库的核心思想：

将状态抽离到UI外进行统一管理

推荐的组件状态管理库：

redux，xstate，mobx，recoil

状态机：

有一个当前状态，然后收到外部事件，随后迁移到下一个状态

应用级框架科普：

next.js：硅谷明星创业公司Vercel开发的React框架

modern.js：字节跳动Web Infra团队研发的全栈开发框架。

Blitz 无API思想的全栈开发框架。