响应式系统与React丨青训营

63 阅读2分钟

React 是什么

React 是一个用于构建用户界面的 JAVASCRIPT 库,主要用于构建 UI,拥有较高的性能。

React 特点

  1. 声明式设计 −React采用声明范式,可以轻松描述应用。
  2. 高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。
  3. 灵活 −React可以与已知的库或框架很好地配合。
  4. JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
  5. 组件化 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
  6. 单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

React 的设计思路

如果用原生的 JavaScript 写 UI ,则会导致越写越复杂,其中所含有的三个编程痛点

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

响应式系统与转换式系统

微信截图_20230814145535.png

响应式系统并不等于转换式系统,转换式系统相当于一个求解输入求解输出的过程,但是前端的界面本身并不需要多余的计算,它需要的是监听事件,并改变某些变量,而响应式系统注重的则是监听事件和监听之后的行为即异步编程的过程
根本性的差异决定了我们写前端代码使用过程式的编程是弊大于利的,这同时说明了我们需要新的编程范式来解决这个问题。

再然后使得产生了对 React 框架的期望即响应式编程

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

React 实现所需要解决的问题

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

React 状态管理库

核心思想:将状态抽离到UI外部进行统一管理
状态机:当前状态,收到外部事件时,迁移到下一个状态