这是我参与「第五届青训营 」笔记创作活动的第五天
一、重点内容
- 前端应用开发历程
- 移动原生应用开发
- 结合 Electron 的桌面应用开发
- UI 编程痛点
- 响应式与转换式
- React 设计与实现 - 组件化
- React 设计与实现 – 状态归属问题
- React 设计与实现 – 生命周期
- React 的实现 - How to Diff
- React 状态管理库 - 核心思想
- React 状态管理库 - 状态机
- React 状态管理库 -Modern.js/Reduck
- 应用级框架科普
二、详细内容
1、设计思路
UI痛点
- a、状态更新，UI 不会自动更新，需要手动地调用 DOM进行更新。
- b、欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- c、UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“回拨地狱”
响应式与转换式
响应式编程
- 状态更新，UI自动更新
状态更新，UI 不会自动更新，需要手动地调用 DOM 进行更新。
- 前端代码组件化，可复用，可封装
欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- 状态之间的互相依赖关系，只需声明即可
”UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到Callback Hell".
组件化
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
组件设计
- 组件声明了状态和 UI 的映射。
- 组件有 Props/State 两和状态。
- 组件”可由其他组件拼装而成
生命周期
2、React实现
Virtual DOM (虚拟 DOM)
Virtual DOM 是 种用于和真实 DOM 同步，而在JS 内存中维护的一个对象，它具有和 DOM 类似的树状结构，并和DOM 可以建立一一对应的关系
它赋予了 React 声明式的 API: 您告诉 React 希望让 U 是什么状态，React 就确保 DOM 匹配该状态。这使您可以从属性操作、事件处理和手动 DOM 更新这些在构建应用程序时必要的操作中解放出来。
Diff
- 完美的最小 Diff 算法，需要 O(n3) 的复杂度
- 牺牲理论最小 Diff，换取时间，得到了 (n) 复杂度的算法
- Heuristic O(n) Algorithm
3、状态管理库
核心思想--将状态抽离到 UI外部进行统一管理
状态机
当前状态，收到外部事件，迁移到下一个状态
React 状态管理库 -Modern.js/Reduck
4、框架科普
NEXT.js
硅谷明星创业公司 Vercel 的 React 开发框架，稳定，开发体验好，支持 Unbundled Dev，SWC 等其同样有 Serverless 一键部署平台帮助开发者快速完成部署。口号是"Let's Make Web Faster'
Modern.js
字节跳动 Web Infra 团队研发的全栈开发框架内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间。
Blitz
无 API 思想的全栈开发框架开发过程中无需写API 调用与 CRUD 逻辑，适合前后端紧密结合的小团队项目。
三、课后总结
- 对于React有更深的理解，便于运用React
- 对于React的原理有了解
- 对于React的设计有理解
