这是我参与「第四届青训营 」笔记创作活动的的第4天
一、React的应用
引用场景
- 前端页面开发
- 移动端原生应用开发
- 结合Electron，进行桌面开发等
二、React的设计思路
UI编程的痛点
- 状态跟新，UI不会自动更新，需要手动的吊桶DOM进行更新
- 欠缺基本的代码层面的疯转和隔离，代码层面没有组件化
- UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”
响应式与转换式
转换式系统
-
应用：
- 编译器
- 数值计算
-
描述：给定输入求解输出
响应式系统
-
应用：
- 监控系统
- UI界面
-
描述：监听事件，消息驱动
响应式编程
前端UI
- 事件
- 执行既定的回调
- 状态变更
- UI更新
目标：
- 状态更新，UI自动更新
- 前端代码组件换，可复用，可疯转
- 状态之间的互相依赖关系，只需声明即可
组件化
总结：
- 组件时组件的组合/原子组件
- 组件内拥有状态、外部不可见
- 父组件可将状态传入组件内部、
组件设计：
- 组件声明了转台和UI的映射
- 组件有Props/State两种状态
- “组件”可有其他组件拼装而成
三、React(hooks)
注意事项：
- 不要在循环、条件或嵌套函数中调用Hook
四、React的实现
问题
-
JSX不符合JS标准语法
通过转换，利用HTML的树形结构，可以将标签根据名称，属性等拆分为对象的形式，然后转换为所期望的格式
-
返回的JSX发生改变时如何更新DOM
利用虚拟DOM
-
State/Props更新时，要重新 触发render函数
五、React状态管理库
核心思想：将所有状态抽离到UI外部进行统一管理
相关：
- redux
- xstate
- mobx
- recoil
状态机：当前状态收到外部事件，迁移到下一个状态
六、应用级框架科普
-
NEXT.js
硅谷明星创业公司Vercel的React开发框架，稳定，开发体验好，支持Unbundled Dev、SWC等，其同样有Serverledd 一件部署平台帮助开发者传递完成部署。口号时“Ley's Make Web Faster"
-
MODERN.js
字节跳动Web infra团队研发的全站开发框架，内置了很多开箱即用的能力与最佳实践。可以减少调研选择工具时间
-
Blitz
无API思想的全栈开发框架内，开发国政中无需写API调用CRUD逻辑，适合前后但紧密联系的小团队项目
