响应式系统与 React | 青训营

40 阅读1分钟

React的设计思路

UI编程痛点

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

响应式编程

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

组件化总结:

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

组件设计

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

React的实现

Virtual DOM(虚拟DOM)

Virtual DOM是一种用于和真实DOM同步,而在JS内存中维护的一个对象,它具有和DOM类似的树状结构,并和DOM可以建立一一对应关系。

Diff算法

diff 算法首先要明确一个概念就是 Diff 的对象是虚拟DOM(virtual dom),更新真实 DOM 是 Diff 算法的结果。

image.png

React状态管理库

核心思想

将状态抽离到UI外部进行统一管理

状态机

当前状态,收到外部事件,迁移到下一个状态

应用级框架科普

  • Next.js
  • Modern.js
  • Blitz