用有限状态机重构复杂状态管理

告别useReducer的if-else地狱，教你用状态机模型规范化组件状态变迁 · 难度：入门 · +10XP

状态机在React中的落地实践

当组件状态数量超过5个且存在明显状态转移约束时，传统useReducer会导致大量冗余判断。本教程教你使用XState库将弹窗组件的打开/关闭/加载/错误状态建模为确定性状态机。通过状态转移矩阵可视化所有合法路径，避免非法状态组合的出现。

import { useMachine } from '@xstate/react';
import { createMachine } from 'xstate';
const modalMachine = createMachine({
  id: 'modal',
  initial: 'closed',
  states: {
    closed: { on: { OPEN: 'opening' } },
    opening: { on: { SUCCESS: 'open', FAIL: 'error' } },
    open: { on: { CLOSE: 'closing' } },
    closing: { on: { CLOSED: 'closed' } },
    error: { on: { RETRY: 'opening', CLOSE: 'closed' } }
  }
});
export function Modal() {
  const [state, send] = useMachine(modalMachine);
  return <div>{state.value}</div>;
}