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

本节课的知识要点

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

React应用场景

• 前端应用开发
• 移动原生应用开发
• 结合Electron进行桌面应用开发

从零开始推出React设计思路

• UI编程痛点，苹果手机选配来确定价格，如果通过JS需要绑定事件通过callback来进行修改，书写代码并不简单
  1. 状态更新，UI不会自动更新，需要手动调用DOM来进行更新
  2. 欠缺基本的代码层面的封装和哥里，代码层面没有组件化
  3. UI之间数据的依赖关系需要对此进行手动维护，如果链路很长会出现回调地狱
• 响应式与转换式
• 响应式系统与前端UI：事件-》执行既定的回调-》状态变更-》更新UI
• 响应式编程
  1. 状态更新，UI也自动更新
  2. 前端代码组件化，复用性和封装性
  3. 状态之间的依赖关系只需要声明即可
• 组件化总结
  1. 组件是组件的组合
  2. 组件内的状态外部不可见
  3. 父组件可以将状态传递给子组件

React实现 Problems

1. JSX不符合JS语法标准
2. 返回的JSX发生改变时如何更新DOM
   • 通过虚拟DOM来对浏览器的真实DOM修改，保证功能的实现
3. State/Props更新时，要重新触发render函数

HOW to Diff

完美的最小Diff算法，需要O(n^3)的复杂度，牺牲理论最小Diff，换取时间，得到O(n)的算法。

React状态管理库

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

• redux
• xstate
• mobx
• recoil

状态机

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

个人感悟

我之前学习过VUE框架，今天学习React框架之后，发现框架之间是有一些相同之处的，对生命周期还有响应式这块都有部分的收获，很不错的一课