React | 青训营笔记

53 阅读1分钟

这是我参与第五届青训营伴学笔记创造活动的第五天!

01、React的历史与应用

历史:

image.png image.png image.png 应用:

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

02、React的设计思路

UI编程的痛点:

  • 状态更新,UI不会自动更新,需要手动的调用,DOM进行更新
  • 欠缺基本的代码层面的封装和隔离,代码层面没有组件化
  • UI之间的数据依赖关系,需要手动维护,如果依赖链路长,则会遇到“Callback Hell”

响应式与转换式:

image.png

响应式编程:

  • 状态更新,UI自动更新
  • 前端代码组件化,可复用,可封装
  • 状态之间的相互依赖关系只需声明即可

组件化与状态归属问题:

image.png 当前价格属于Root节点!
状态归属于两个节点向上寻找到最近的祖宗节点

  1. 组件是组件的组合/原子组件
  2. 组件内拥有状态,外部不可见
  3. 父组件可将状态传入组件内部

组件设计:

  1. 组件声明了状态和UI的映射
  2. 组件有Props/State两种状态
  3. “组件”可以由其他组件拼装而成

03、React(hooks)的写法

image.png

image.png

04、React的实现

Problems:

  1. JSX不符合JS标准语法
  2. 返回的JSX发生改变时,如何更新DOM
  3. State/Props更新时,要重新触发render函数

Diff:

image.png

05、React状态管理库

核心思想:

image.png 会降低组件的复用性

image.png

状态机:

image.png

06、应用级框架科普

image.png