模块化+状态驱动实现A/B测试的清晰切换与高可维护性，通过解耦变量、策略、渲染层并以统一状态控制行为流向。
模块化 + 状态驱动，能让 A/B 测试逻辑切换清晰、可维护、无侵入。核心不是“写两套代码”，而是把变量、策略、渲染层解耦，用统一状态控制行为流向。
功能开关作为中心状态源
定义轻量级开关管理器（如 FeatureFlag 类），不依赖外部服务也可本地配置。每个 A/B 实验对应一个唯一 key（如 "checkout_button_v2"），值为字符串标识（"control" / "variant_a"）或数字权重（用于灰度）。
- 开关初始化时读取 URL 参数、localStorage 或后端下发的实验配置，优先级按需设定
- 提供 useFeature(flagKey) Hook 或 getVariant() 方法，组件内直接消费，不手动传 props
- 避免在开关里写业务逻辑——它只负责“返回当前该用哪个分支”，决策逻辑下沉到模块内部
按实验维度拆分逻辑模块
每个 A/B 实验对应一组独立模块：数据获取、计算规则、UI 组件。例如 checkout 流程优化实验，可组织为：
- api/checkout/useCheckoutData.ts：根据 variant 动态调整请求参数或 fallback 行为
- logic/checkout/calculateDiscount.ts：导出 calculate(controlInput) 和 calculateVariantA(input)，由开关决定调用哪个
- ui/checkout/CheckoutButton.tsx：接收统一 props，内部用 useFeature("checkout_button_v2") 切换样式、文案、点击事件
模块之间零耦合，新增 variant 只需加一个函数或组件，不改原有代码。
用组合式路由或布局实现无感切换
对跨页面、多步骤的 A/B 实验（如整套注册流程），不建议在每个页面重复判断。可在路由层或根布局中注入实验上下文：
- 用 React Router 的 element props 包裹实验专属 Layout，提前 resolve variant 并透传给子路由
- 或用 Context 提供 ExperimentProvider，包裹需要参与实验的路由范围，子组件通过 useExperiment("signup_flow") 拿到当前分支和配套 hook
- 关键点：实验边界要明确——是整个流程？还是仅某一步？边界清，模块才不会越界耦合
上线前验证与降级有据可依
模块化让验证更聚焦：每个 variant 模块应自带单元测试（如 calculateDiscount.test.ts 覆盖 control/variant_a 输入输出），CI 中可并行跑不同分支逻辑。
- 线上通过 feature flag 控制台一键关闭实验，自动回退到默认模块，无需发版
- 埋点统一收口：所有 variant 组件调用同一个 trackAbEvent()，自动带上 flagKey 和 variant 值，避免漏埋或命名混乱
- 日志中记录开关决策依据（如 “localStorage override=variant_b”），排查问题时一眼定位原因
