别再这样用useState了！这个被99%前端忽视的设计模式，正在悄悄拯救代码

前端达人

发布于 2025-10-09 13:08:39

1190

文章被收录于专栏：前端达人前端达人

前端React开发中被忽视的设计模式：状态机其实没你想的那么复杂

不是什么新技术，就是那个计算机课上学过的状态机。但用好了，能让你的代码清爽不少。

从一个真实案例说起

前段时间重构一个表单组件，发现代码里有这样的状态管理：

const [isLoading, setIsLoading] = useState(false);
const [isSubmitted, setIsSubmitted] = useState(false);
const [hasError, setHasError] = useState(false);
const [isEditing, setIsEditing] = useState(false);
const [showModal, setShowModal] = useState(false);

看起来还行，但问题在于这些状态之间的关系完全靠开发者自觉维护。比如isLoading为true时，isEditing应该是false，但代码里没有强制约束。

结果就是偶尔会出现一些奇怪的组合：按钮既在加载又可以编辑，或者错误提示和成功提示同时出现。

状态机：其实就是把状态管理规范化

状态机听起来很学术，但核心思想很简单：明确定义所有可能的状态，以及状态之间如何转换。

用状态机重写上面的逻辑：

const formMachine = createMachine({
id: 'form',
initial: 'idle',
states: {
    idle: {
      on: { EDIT: 'editing', SUBMIT: 'loading' }
    },
    editing: {
      on: { SAVE: 'loading', CANCEL: 'idle' }
    },
    loading: {
      on: { SUCCESS: 'success', ERROR: 'error' }
    },
    success: {
      on: { RESET: 'idle' }
    },
    error: {
      on: { RETRY: 'loading', RESET: 'idle' }
    }
  }
});

好处很明显：

状态清晰：一眼就能看出有哪些状态
转换明确：什么情况下可以从A状态到B状态
不会出现非法状态：比如同时loading和editing

什么时候值得用状态机？

不是所有场景都需要状态机，我的经验是：

适合用的场景：

表单（有编辑、提交、成功、失败等状态）
模态框（打开、关闭、加载等）
多步骤流程（注册向导、支付流程等）
任何有明确"生命周期"的组件

不太需要的场景：

简单的开关状态（显示/隐藏）
纯展示组件
只有1-2个状态的简单逻辑

XState：不错的工具，但有学习成本

如果要在项目中使用状态机，XState是个不错的选择：

import { useMachine } from '@xstate/react';

function FormComponent() {
  const [state, send] = useMachine(formMachine);

  return (
    <div>
      {state.matches('loading') && <LoadingSpinner />}
      {state.matches('error') && <ErrorMessage />}
      
      <button 
        onClick={() => send('SUBMIT')}
        disabled={!state.can('SUBMIT')}
      >
        {state.matches('loading') ? '提交中...' : '提交'}
      </button>
    </div>
  );
}

优点：

API设计得不错，和React集成度高
有可视化工具，能生成状态图
支持复杂场景（嵌套状态、并行状态等）

缺点：

学习曲线确实存在
小项目可能有点重
团队需要统一理解

一个更轻量的思路

如果觉得XState太重，也可以自己实现简单版本：

function useStateMachine(config) {
const [state, setState] = useState(config.initial);

const send = (event) => {
    const currentState = config.states[state];
    const nextState = currentState.on[event];
    if (nextState) {
      setState(nextState);
    }
  };

return [state, send];
}

这样既能享受状态机的好处，又不会引入太多复杂度。