React学习|青训营笔记

56 阅读2分钟

React的历史与应用

  1. 前端应用开发 eg.Facebook Instagram Netflix网页版
  2. 移动原生应用开发
  3. 结合Electron 进行桌面应用开发

React 的设计思路

响应式与转换式

转换式系统
  1. 给定输入与输出
  2. 编译器
  3. 数值计算
响应式系统 =>
  1. 监听事件、消息驱动
  2. 监控系统
  3. UI界面
响应式系统 => 前端UI :
  • 事件 => 执行既定的回调 => 状态变更 => 自动 UI 更新

响应式编程

  • 状态更新,UI自动更新
  • 前端代码组件化,可以复用,可以封装
  • 状态之间的互相依赖关系,只需做出声明
组件设计
  • 组件声明了状态和UI的映射
  • 组件有props/state两种状态
  • “组件”可以由其他组件拼装而成
组件化总结
  • 组件是组件的结合/原子组件
  • 组件内拥有状态,外部不可见
  • 父组件可将状态传入组件内部

状态归属问题:状态归属于两个节点向上寻找到最近的父节点---组件共享
⚠️在编写的时候自己也要注意变量位置

以下这些问题你都清楚吗📌

  1. React 是单向数据流,还是双向数据流
  2. 如何解决状态不合理上升的问题
  3. 组件的状态改变之后,如何更新DOM

例如答案1:React 单向数据流✔ 双向数据流 ❌

Hook => 不要在循环、条件或者嵌套中去使用Hook

  1. useState
  2. useEffect

React的实现

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

React状态管理库

  1. 将状态抽离到UI外部进行统一管理
  2. 状态机: 当前状态,收到外部事件,迁移到下一个状态

应用级框架

  1. NEXT.js
  2. MODERN.js
  3. Blitz

还有什么好用的框架,大家也可以多交流互相学习!