各位，大家好！欢迎来到今天的讲座，主题是“如何用 React 状态机驯服那些躁动的 SVG 化学反应”。
我想先问大家一个问题：你们在写 React 应用时，有没有过一种感觉，就像是在煮一锅不知道是什么的化学汤？你往锅里扔了一块 React 组件（原料 A），又扔了一个状态（原料 B），然后不小心碰倒了一堆回调函数（催化剂 C）。结果呢？这锅汤没煮沸，反而炸了，你的代码变得像意大利面一样乱成一团，不仅不知道哪个原子在哪里，甚至分不清哪边是酸性，哪边是碱性。
特别是在处理这种“化学反应流程图”的时候，事情变得更加棘手。我们要画圆圈代表原子，画线代表反应键，还要让它们动起来。如果你用传统的 if-else 或者混乱的 useState 来管理，你的 SVG 瞬间就会变成一块巨大的、像素格外的拼布，完全没有任何物理美感可言。
今天，我们要讲的不是如何画圆圈，而是如何构建一个基于状态机的声明式驱动系统。我们要把那些混乱的交互逻辑，像提炼黄金一样，提炼成一套严丝合缝的状态机逻辑，然后用 React 这把锤子，把它敲进 SVG 的骨头里。
准备好了吗？让我们开始这场化学反应！
第一部分：为什么你的 SVG 界面像个醉汉？
首先，我们要承认一个痛点。当我们谈论“化学反应流程图”时，我们实际上是在谈论一系列的状态转换。
想象一个场景：
- 初始状态： 反应物 A 和 反应物 B 站在桌子的两端，中间有一根红线（反应路径），上面写着“请勿触碰”。
- 用户交互： 用户点击了“开始反应”按钮。
- 过渡状态： 反应物 A 开始运动，它们碰撞，中间的连线发生形变（弯曲、变细），颜色从红色变成绿色。
- 结束状态： 产物 C 生成，并带有庆祝的烟花效果。
如果你用传统的 React 方式写这段代码，你可能会写出这样的噩梦：
const [state, setState] = useState('idle');
const [positionA, setPositionA] = useState({x: 0, y: 0});
const [positionB, setPositionB] = useState({x: 200, y: 0});
const handleClick = () => {
if (state === 'idle') {
// 逻辑：设置开始状态，计算 A 的移动轨迹
// 还要计算连线的贝塞尔曲线
// 还要处理 CSS 动画类名
setPositionA({x: 100, y: 50});
setState('reacting');
} else if (state === 'reacting') {
// 如果用户手快点了两下怎么办？
// 这里的逻辑会变得非常混乱
// 位置怎么算？连线怎么断？
setState('finished');
}
// ...以此类推，代码像屎山一样堆积
};
return (
<svg>
<circle cx={positionA.x} cy={positionA.y} />
<path d={calculateBezier(positionA, positionB)} />
<button onClick={handleClick}>Start</button>
</svg>
);看到没？这就是所谓的“命令式”地狱。你在告诉浏览器：“现在移动这个点，然后那个点，然后画那条线，别忘了更新一下 CSS 类。”这种写法不仅难维护，而且一旦流程复杂一点，比如加入了“错误重试”或“条件分支”，你的回调函数就会膨胀到几千行，最后你自己都分不清哪段代码控制的是“加热”，哪段代码控制的是“冷却”。
那么，有没有一种更优雅的方式？ 就像炼金术士一样，我们不需要关心每一个原子的运动轨迹，我们只需要声明：“当状态从 A 变到 B 时，原子应该出现，并且移动到那里，同时连线应该变成蓝色。”
答案是：状态机。
第二部分：状态机——化学反应的指挥家
在编程界，状态机不是什么新鲜玩意儿，但很多人都在用，却没人真正理解它。想象一下，一个状态机就像是一个严格的餐厅服务员。
你（用户）不能直接走进厨房（DOM 操作）去炒菜。你只能对服务员（状态机）点菜（发送事件）。
服务员会说：“好的，我现在去确认库存，这是您的‘开胃菜’（空闲状态）。”
如果你点了“主菜”而服务员还处于“开胃菜”状态，服务员会拒绝：“对不起，没点菜呢。”
只有当你点菜成功，服务员的状态才会变成“上菜中”，然后把你端上来的东西放到桌上。
这就是状态机的核心魅力：有限状态机（FSM）。它定义了所有可能的状态集合（Idle, Reacting, Finished），以及这些状态之间如何相互转换。它把那些复杂的逻辑判断，封装在了一个封闭的黑盒子里。
对于我们的化学反应图，状态机定义了：
- Idle: 反应物静置，线条清晰。
- Mixing: 反应物开始抖动，颜色变暗。
- Boiling: 反应剧烈，甚至产生气泡（粒子效果）。
- Finished: 生成产物，闪光。
第三部分：SVG 坐标系与“原子”的生物学
既然我们要用状态机驱动，我们就得先解决数据结构的问题。SVG 是基于数学坐标系的（0,0 在左上角），而我们的 React 组件是基于 Flexbox 或绝对定位的。要建立连接，我们需要一个“坐标系映射器”。
这里我要强调一点：在声明式编程中，组件不应该知道它是怎么被渲染的，它只需要知道它在宇宙中的位置。
我们定义一个简单的数据结构，作为我们的“原子”：
// atoms.js
export const ATOMS = {
A: { id: 'A', color: '#FF5733', x: 50, y: 200, radius: 40 },
B: { id: 'B', color: '#33FF57', x: 350, y: 200, radius: 40 },
C: { id: 'C', color: '#3357FF', x: 0, y: 0, radius: 0, opacity: 0 }, // 初始不可见
};注意看 C 原子。在 Idle 状态下，它的 x, y 是 0，半径是 0，透明度是 0。这就是我们所谓的“初始状态”。当我们切换到 Finished 状态时，我们只需要告诉状态机：“把 C 原子移动到中间，让它变大，让它变透明。”
React 的渲染函数就会自动处理这些属性的变化。我们不需要手动写 style={{ left: 0 }} 或 style={{ transform: 'scale(0)' }}。声明式的力量就在于此：我们描述结果，React 负责过程。
第四部分：构建状态机 – XState 的魔法
现在，让我们引入 XState，这是目前处理 React 状态机最流行、最强大的库。它就像是给状态机穿上了西装打上了领带，极其专业。
首先，我们需要定义机器的行为：
// machine.js
import { createMachine, assign } from 'xstate';
export const reactionMachine = createMachine({
id: 'reaction',
initial: 'idle',
context: {
// 我们在上下文中保存所有原子的位置信息
atoms: ATOMS,
},
states: {
idle: {
on: {
START_REACTION: 'mixing'
}
},
mixing: {
after: {
1000: 'boiling', // 模拟化学反应的时间流逝
500: { target: 'mixing', actions: 'vibrate' } // 混合时的抖动效果
}
},
boiling: {
on: {
FINISH: 'finished'
}
},
finished: {
// 在这里我们定义最终状态的原子的样子
entry: assign({
atoms: {
...context.atoms,
C: { ...context.atoms.C, x: 200, y: 200, radius: 50, opacity: 1 }
}
})
}
}
});看这段代码，逻辑是不是清晰多了？mixing 状态下，1秒后自动进入 boiling。finished 状态下，entry 动作会修改原子 C 的属性。
这里有一个关键点：XState 的 context 是响应式的。当我们修改 context 中的 atoms 属性时，React 知道 atoms 变了，于是它重新渲染组件，把新的坐标传给 SVG 节点。这就是“声明式驱动”的闭环。
第五部分：从状态到 SVG – 神经元突触的连接
有了状态机，有了数据，我们剩下最后一步：如何把数据变成画面？我们要画那些线——那些代表化学键、能量传输、或者仅仅是视觉引导的线条。
在 SVG 中，连接两个点的线段非常简单，但如果你想要一条平滑的曲线（比如贝塞尔曲线），就需要计算。
我们要写一个“智能连线”组件。它的输入是两个原子的位置，输出是一个 <path> 元素。
// ConnectionLine.jsx
import React from 'react';
export const ConnectionLine = ({ fromAtom, toAtom }) => {
// 简单的贝塞尔曲线算法
// 我们取两点中点的垂直方向作为控制点，让线条弯曲
const dx = toAtom.x - fromAtom.x;
const dy = toAtom.y - fromAtom.y;
const dist = Math.sqrt(dx * dx + dy * dy);
// 控制点偏移量，距离越远，弯曲越大
const controlOffset = dist * 0.5;
const pathData = `M ${fromAtom.x} ${fromAtom.y}
C ${fromAtom.x + controlOffset} ${fromAtom.y},
${toAtom.x - controlOffset} ${toAtom.y},
${toAtom.x} ${toAtom.y}`;
return (
<path
d={pathData}
stroke="currentColor"
strokeWidth="2"
fill="none"
strokeLinecap="round"
// 这里的动画可以使用 Framer Motion 或者 CSS Transition
style={{ transition: 'stroke 0.5s ease' }}
/>
);
};在这个组件里，我们没有看到任何 onClick，没有看到任何 useState 的设置。我们只是根据传入的 fromAtom 和 toAtom 计算出路径。这纯粹是数学，纯粹是数据驱动。
第六部分：动画的“灵魂” – 使用 CSS 变换
现在，我们有了一个状态机，它不断地改变原子的 x, y, radius。但是，如果在 React 中直接修改这些内联样式，可能会有性能问题，或者动画看起来会很生硬（掉帧）。
更好的做法是利用 CSS 的 transform 属性。这得益于现代浏览器的硬件加速。
我们写一个 Atom 组件：
// Atom.jsx
export const Atom = ({ atom }) => {
return (
<g className="atom-group">
{/* 使用 CSS 变量来驱动位置和大小，这样动画更丝滑 */}
<circle
cx={atom.x}
cy={atom.y}
r={atom.radius}
fill={atom.color}
style={{
transformBox: 'fill-box',
transformOrigin: 'center',
transform: `translate(${atom.x}px, ${atom.y}px) scale(${atom.radius / 40})`,
// 注意：这里的 x,y 是 SVG 坐标系，不需要 translate
// 修正逻辑：SVG 中 cx, cy 已经定位了，我们只需要做缩放动画
transform: `scale(${atom.radius / 40})`,
opacity: atom.opacity,
transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)'
}}
/>
{/* 原子核装饰 */}
<circle cx={atom.x} cy={atom.y} r={atom.radius * 0.3} fill="rgba(255,255,255,0.3)}" />
</g>
);
};等等，上面的代码有个小 bug。在 SVG 中，cx 和 cy 是定位属性。如果你用 CSS transform: translate 来改变 cx，是行不通的。SVG 的坐标定位和 HTML 的 div 定位是两码事。
修正后的高性能写法：
export const Atom = ({ atom }) => {
return (
<g className="atom-group">
<circle
cx={atom.x}
cy={atom.y}
r={atom.radius}
fill={atom.color}
opacity={atom.opacity}
// 只有半径变化时使用 transition
style={{
transition: 'r 0.5s ease, opacity 0.5s ease',
cursor: 'pointer'
}}
/>
</g>
);
};其实，为了更极致的性能，我们可以利用 React 的 useMemo 来计算路径，或者直接在 JSX 中渲染。SVG 的重绘开销在原子数量不多（比如少于 100 个）时，浏览器能轻松搞定。重点在于逻辑的清晰，而不是过早的优化。
第七部分：整合所有东西 – 完整的化学反应容器
让我们把上面所有零散的碎片组装起来。我们要创建一个 ChemicalReactor 组件，它持有状态机实例，并根据状态机的 context.atoms 进行渲染。
// Reactor.jsx
import React, { useMachine } from 'react';
import { reactionMachine } from './machine';
import { Atom } from './Atom';
import { ConnectionLine } from './ConnectionLine';
export const Reactor = () => {
const [current, send] = useMachine(reactionMachine);
const { atoms } = current.context;
const isFinished = current.matches('finished');
return (
<div style={{ textAlign: 'center', padding: '20px' }}>
<h2>反应容器</h2>
{/* 状态指示器 */}
<div style={{ marginBottom: '20px', color: '#666' }}>
当前状态: <span style={{ fontWeight: 'bold', color: isFinished ? 'green' : 'orange' }}>
{current.value}
</span>
</div>
{/* SVG 画布 */}
<svg width="500" height="400" style={{ border: '1px solid #ccc', background: '#f9f9f9' }}>
{/* 连线层：通常放在底层 */}
<ConnectionLine fromAtom={atoms.A} toAtom={atoms.B} />
{/* 原子层 */}
<Atom atom={atoms.A} />
<Atom atom={atoms.B} />
<Atom atom={atoms.C} />
{/* 气泡层（可选的高级特效） */}
{current.matches('boiling') && <Bubbles />}
</svg>
{/* 控制面板 */}
<button
onClick={() => !isFinished && send({ type: 'START_REACTION' })}
disabled={isFinished}
style={{
padding: '10px 20px',
fontSize: '16px',
background: isFinished ? '#ccc' : '#007bff',
color: 'white',
border: 'none',
borderRadius: '5px',
cursor: 'pointer'
}}
>
{isFinished ? '反应结束 (重置)' : '开始反应'}
</button>
<button
onClick={() => send({ type: 'FINISH' })} // 强制完成，用于演示
disabled={!current.matches('mixing')}
style={{
marginLeft: '10px',
padding: '10px 20px',
background: current.matches('mixing') ? '#28a745' : '#ccc',
color: 'white',
border: 'none',
borderRadius: '5px',
cursor: 'pointer'
}}
>
强制结束
</button>
</div>
);
};看，这段代码是不是无比清爽？我们甚至不需要关心 A 原子具体怎么动，B 原子怎么动，C 原子怎么生成。我们只需要声明：“如果状态是 finished，就把 C 的半径设为 50。”
第八部分：处理“意外” – 玻璃状态与错误处理
现实中的化学反应不会总是一帆风顺。有时候用户会疯狂点击按钮，有时候反应条件不足。
在我们的状态机模型中，处理这种情况非常简单。
- 玻璃状态：我们在状态机中定义一个
loading状态。当点击开始时，机器进入loading。此时按钮禁用。这防止了用户重复触发事件。loading: { after: { 500: 'reacting' } // 模拟计算延迟 } - 错误处理：假设 A 和 B 的电荷相斥。我们可以添加一个
error状态。error: { on: { RETRY: 'idle' } }当状态机进入
error时，我们在 Reactor 组件中渲染一个红色的警告框，而不是化学方程式。
这种逻辑的分离，使得代码极其健壮。你不需要去检查 if (state === 'idle' && clickingCount > 1)，状态机只会响应合法的输入，把非法的输入拒之门外。
第九部分：高级特效 – 电子云与贝塞尔曲线的动态变形
既然我们已经有了基础架构，我们就可以做一些炫酷的事情了。
1. 电子云：
原子不是完美的圆圈。我们可以给原子添加一个 filter="url(#glow)"。在 SVG 中，我们定义一个 <filter>，使用高斯模糊来模拟发光效果。
当状态变为 mixing 时，我们改变滤镜的颜色或强度；当变为 finished 时，滤镜散开。
2. 动态连线：
当两个原子互相靠近时，连线不应该是一条死板的直线或贝塞尔曲线，它应该像弹簧一样有弹性。
我们可以使用 CSS 的 transition 来处理 stroke-width（线条粗细）和 stroke-opacity（线条透明度）。
在状态机中，我们可以添加 entry 动作来动态修改连线的样式属性。
// 在 machine.js 中
boiling: {
entry: assign({
atoms: (ctx) => ({
...ctx.atoms,
// 模拟能量波动
A: { ...ctx.atoms.A, radius: ctx.atoms.A.radius + (Math.random() - 0.5) * 2 }
})
})
}然后 React 会自动处理这个 Math.random() 带来的半径抖动，因为我们在 Atom 组件里加了 transition。
第十部分：总结 – 为什么我们推崇这种模式
好了，同学们，今天我们演示了如何用 React 和状态机来构建化学反应流程图。
回顾一下我们做的事情：
- 解耦：我们将业务逻辑（状态转换）与 UI 渲染（SVG 绘图）分离开来。
- 声明式：我们不再编写“如何移动元素”的代码，而是编写“元素在什么状态应该长什么样”的代码。
- 可维护性：如果我们要添加一个新的状态，比如“冷却”或“过滤”，我们只需要在状态机配置中加一个
state和on，而不需要去修改成百上千行的 JSX 渲染逻辑。
这种模式对于复杂的 UI 流程图、游戏逻辑、表单验证流程都非常适用。
最后，我想说，编程和化学反应是一样的。代码是分子，逻辑是化学键。如果你把代码写得乱七八糟，分子结构就会断裂，你的应用就会爆炸。如果你用状态机这种严谨的结构来组织代码，你的应用就会像最稳定的晶体一样，既美丽又坚固。
希望大家回去后，把那些混乱的 onClick 回调全部扔进垃圾桶，拥抱状态机，拥抱声明式编程。祝大家的代码永远没有 Bug，永远像烟花一样美丽！
下课！