react-design-patterns详解六：Command命令模式封装Wizard步骤导航，行为内聚的秘诀

react-design-patterns详解六：Command命令模式封装Wizard步骤导航，行为内聚的秘诀

【免费下载链接】react-design-patternsA research project to apply the object-oriented design patterns to React.项目地址: https://gitcode.com/gh_mirrors/re/react-design-patterns

react-design-patterns是一个把经典面向对象设计模式落到 React 上的研究项目，覆盖单例、桥接、备忘录等常见模式；本篇聚焦Command 命令模式，通过一个Wizard步骤导航组件，揭开它"行为内聚"的秘诀。

什么是Command命令模式：把行为封装在一处

命令模式的核心思想一句话就能说清：把"用户发起的某个动作"当成一个独立的行为单元，集中封装起来。

最经典的场景是"撤销 / 重做"——每个操作都被记成一个"命令"，之后可以随意回放、回退。而在 React 中，这套思想不需要类继承和消息队列，靠组件本身 + 状态就能自然实现，这正是本项目想验证的观点。

React步骤导航怎么写：Wizard组件实战

想象一个注册流程：创建账号 → 验证邮箱 → 完成，共三步。如果直接用路由硬写，通常会遇到两个坑：

• 逻辑分散："去哪一步"的判断散落在每个步骤组件和路由配置里；
• 状态外泄："当前走到第几步"这个状态，不得不塞进 Redux 这类全局状态容器。

命令模式的回答是：所有导航行为收进一个容器组件 Wizard，步骤组件只管展示自己。示例代码在example/command/CommandExample.js中，用法极其简单，把步骤组件以数组形式传进去即可：

<Wizard steps={[ Step1, Step2, Step3, ]} />

Wizard内部只维护一个状态——当前步骤索引：

const [ idx, setIdx ] = React.useState(0)

它根据索引渲染对应的步骤，并在非最后一步时显示"Go to next step"按钮，点击只做一件事：setIdx(prevIdx => prevIdx + 1)。

✨ 至此，索引状态、渲染逻辑、点击响应，全部被"锁"在Wizard内部，步骤组件对导航完全无知。

行为内聚的秘诀：改导航逻辑，不用碰步骤

为什么这种设计值得借鉴？因为行为与内容被彻底分开了：

例如要加一个"返回上一步"按钮，或"跳过第二步"，只需要修改Wizard的内部逻辑，Step1/Step2/Step3一行代码都不用动。项目README.md中点明了这一点：任何导航逻辑的变更（如增加回退能力），都不会影响具体步骤的实现——这就是"行为内聚"带来的核心收益：行为成为一等的封装单元，可以自由替换与扩展。

三步上手：运行Command模式示例

1️⃣ 克隆项目：

git clone https://gitcode.com/gh_mirrors/re/react-design-patterns

2️⃣ 进入示例目录并安装依赖：

cd react-design-patterns/example npm install

3️⃣ 启动本地服务：

npm start

打开http://localhost:8080，点击顶部的Command按钮，即可亲手体验 Wizard 步骤导航。入口文件example/index.js同时注册了单例、中介者、桥接、备忘录等全部示例模式，可以一键切换着玩。

小结

• 命令模式的本质：把"用户发起的动作"封装为独立、可复用的行为单元；
• Wizard组件中，步骤组件只管内容，容器组件负责行为，导航逻辑不再散落；
• 项目里遇到多步表单、审批流、任务向导时，都可以借鉴这套思路：行为内聚、内容解耦，代码才真正好改。

到这里，react-design-patterns 详解系列的 Command 命令模式篇就讲完了。项目里还有状态模式、策略模式、中介者模式等示例与文档（见doc/目录与example/目录），欢迎按同样的方式继续探索。

【免费下载链接】react-design-patternsA research project to apply the object-oriented design patterns to React.项目地址: https://gitcode.com/gh_mirrors/re/react-design-patterns