React的历史与应用
- 前端应用开发 eg.Facebook Instagram Netflix网页版
- 移动原生应用开发
- 结合Electron 进行桌面应用开发
React 的设计思路
响应式与转换式
转换式系统
- 给定输入与输出
- 编译器
- 数值计算
响应式系统 =>
- 监听事件、消息驱动
- 监控系统
- UI界面
响应式系统 => 前端UI :
- 事件 => 执行既定的回调 => 状态变更 => 自动 UI 更新
响应式编程
- 状态更新,UI自动更新
- 前端代码组件化,可以复用,可以封装
- 状态之间的互相依赖关系,只需做出声明
组件设计
- 组件声明了状态和UI的映射
- 组件有props/state两种状态
- “组件”可以由其他组件拼装而成
组件化总结
- 组件是组件的结合/原子组件
- 组件内拥有状态,外部不可见
- 父组件可将状态传入组件内部
状态归属问题:状态归属于两个节点向上寻找到最近的父节点---组件共享
⚠️在编写的时候自己也要注意变量位置
以下这些问题你都清楚吗📌
- React 是单向数据流,还是双向数据流
- 如何解决状态不合理上升的问题
- 组件的状态改变之后,如何更新DOM
例如答案1:React 单向数据流✔ 双向数据流 ❌
Hook => 不要在循环、条件或者嵌套中去使用Hook
- useState
- useEffect
React的实现
- 不同类型的元素 => 替换
- 同类型的 DOM 元素 => 更新
- 同类型的组件元素 => 递归调用
React状态管理库
- 将状态抽离到UI外部进行统一管理
- 状态机: 当前状态,收到外部事件,迁移到下一个状态
应用级框架
- NEXT.js
- MODERN.js
- Blitz
还有什么好用的框架,大家也可以多交流互相学习!