反应式编程

元信息

• 目标：理解"状态变 → 界面自动变"的反应式机制——从命令式手动同步转向声明式数据驱动，掌握响应式数据、依赖追踪、自动更新三要素及相关术语
• 关键概念：命令式、声明式、响应式数据、依赖追踪、双向绑定、状态提升、计算属性
• 关联阶段：cp4
• 常见误区：以为反应式是框架黑魔法（本质是 Proxy 拦截读写 + 依赖收集 + 通知更新的观察者模式工程版）；以为双向绑定与单向数据流对立（v-model 内部仍是"事件回写状态"的单向机制）；以为任何变量改动都会刷新界面（只有被依赖追踪的响应式数据才触发精确更新）

反应式编程：数据驱动的UI开发

反应式编程是一种以数据流为核心的编程范式，它关注数据的变化和传播。在前端开发中，这意味着UI会自动响应数据状态的变化，实现声明式的数据绑定。

概念与术语

理解反应式编程，先理清一组环环相扣的术语：

两种思维方式的分野：

• 命令式（imperative）：你一步步描述"怎么做"——取到数据后，手动执行 table.innerHTML = ... 更新界面。jQuery 时代是典型
• 声明式（declarative）：你只声明"界面长什么样"（界面是状态的函数），"何时更新"交给框架。这是反应式的入口

支撑反应式的机制术语：

• 数据流（data stream）：把数据及其变化统一看作"随时间流动的序列"。变量不再是静止的值，而是"会发出新值的源"
• 观察者模式（observer pattern）：反应式的机制根基——被观察者（数据）持有订阅者名单，自身变化时逐个通知。响应式系统三要素里的"依赖收集+通知"就是它的工程化版本
• 订阅（subscribe）：注册"数据变化后执行什么"的动作。框架里常表现为 watchEffect、useEffect 等副作用注册
• 响应式数据（reactive data）：被代理包装过的数据，读写都被拦截——读时记录"谁在用我"（依赖收集），写时通知"用我的人该更新了"
• 依赖追踪（dependency tracking）：自动记录"哪个视图/效果依赖哪些数据"，从而做到精确更新，而非整页重渲染
• 计算属性（computed）：由其它响应式数据派生的值，自动缓存并在依赖变化时惰性重算
• 单向数据流 vs 双向绑定：数据→视图是所有框架的标配；视图→数据（如 v-model）的双向绑定是表单场景的便利糖衣，其内部仍是"事件回写状态"的单向机制
• 状态提升与单一数据源：多个组件共享的状态上移到共同父级或全局 store，避免状态副本互相打架

周边术语（阅读文献时常见）：

术语	含义
FRP	函数式反应式编程（Functional Reactive Programming），RxJS 等库的学理源头
Observable	可观察对象：数据流的统一抽象，可被订阅
副作用（side effect）	函数对外部世界的影响（改DOM、发请求），反应式框架要求副作用被显式注册
不可变性（immutability）	React 系的惯例：不修改原数据而以新数据替换，让"变化"更易检测
虚拟 DOM / diff	用轻量描述对比出最小 DOM 改动，使"整体重新渲染"的声明式模型在性能上可行

模板技术实现了静态的数据绑定，而组件技术则进一步实现了数据的动态绑定，并且实现了双向绑定：

• 当数据状态变化时，自动更新视图状态。比如保存内容的数组发生变化，则表格视图随之刷新。
• 当视图状态变化时，则自动更新数据状态。比如表单视图因用户的输入而改变，则接收字段内容的表单数据对象亦随之更新。

由此，前端开发从以数据的操作为中心（如DOM操作）=》 以前端状态的管理为中心（将界面的变换或用户操作视作为一个有限状态机）

表格数据自动更新：从数据到UI

传统方式（手动更新）：

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

反应式方式（自动更新）：

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

表单字段自动同步：从UI到数据

传统方式（手动绑定）：

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

反应式方式（自动绑定）

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

响应式系统的三要素

1. 响应式数据（Reactive Data）

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

2. 依赖追踪（Dependency Tracking）

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

3. 自动更新（Automatic Updates）

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

组件框架示例

Vue 3 Composition API

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="reverseMessage">反转文本</button>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue';

// 响应式数据
const message = ref('Hello Reactive!');

// 计算属性（自动依赖追踪）
const reversedMessage = computed(() => {
  return message.value.split('').reverse().join('');
});

// 方法
function reverseMessage() {
  message.value = reversedMessage.value;
}
</script>

React Hooks

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

反应式编程的优势

1. 声明式代码：关注"做什么"而不是"怎么做"
2. 自动同步：数据变化自动更新UI，减少手动DOM操作
3. 更好的可维护性：数据流清晰，易于追踪和调试
4. 高效的更新：通过虚拟DOM和差异算法最小化实际DOM操作

记住：反应式编程的核心思想是数据变化自动驱动UI更新，这让我们的代码更专注于业务逻辑，而不是繁琐的DOM操作。

---

学习提示：理解反应式编程的关键是转变思维——从"如何更新UI"变为"如何管理数据状态"。

扩展阅读

• 从事件驱动到数据驱动 https://godbasin.github.io/front-end-playground/front-end-basic/understanding/data-driven-or-event-driven.html