响应式系统与React | 青训营笔记

78 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第13天

1、React的应用

React的应用场景

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

2、React的设计思路

UI编程痛点

用原生的js写,存在的UI编程痛点

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

image-20220823175950341.png

image-20220823175959549.png

响应式编程

image-20220823180005229.png

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

3、React(hooks)的写法

image-20220823180752205.png

image-20220823180759391.png

4、React的实现

存在的问题
  1. JSX不符合JS标准语法
  2. 返回的JSX发生改变时,如何更新DOM
  3. Stata/Props 更新时,要重新触发render函数
How to Diff?

image-20220823180950757.png

完美的最小Diff算法,需要O(n^3)的复杂度

牺牲理论最小Diff,换取时间,得到了O(n)复杂度的算法:

 Heuristic O(n) Algorihm

image-20220823181157683.png

5、React状态管理库

核心思想:将状态抽离到UI外部进行统一管理

状态机

image-20220823181311459.png

6、应用级框架科普

image-20220823181337476.png

8、总结

在这节课,我对响应式系统和react有了初步了解,React是js的库,可以简化可视化界面的开发,是基于JSX语法,JSX是react的核心组成部分,react的核心是组件,将数据和逻辑进行封装,提高了代码复用率,降低了代码维护难度。

\