请对比 Redux-Saga 与 MobX 在 React 状态管理中的主要区别，并说明各自的适用场景。

回答思路

1. 【回答框架 1】Redux-Saga 是基于 Redux 的中间件，通过 ES6 Generator 函数管理副作用，以可预测的方式处理异步流程。其核心是 Saga 监听 dispatch 的 action，并执行对应的异步任务，支持并发、取消和竞态控制，适合复杂异步流程和需要严格数据流的场景。
2. 【回答框架 2】MobX 是基于响应式编程的状态管理库，通过 observable 状态和 computed 值实现自动追踪与更新。其核心是透明依赖收集，当状态变化时，所有依赖该状态的组件会自动重新渲染，适合中小型应用和追求高效开发的场景。
3. 【回答框架 3】主要区别在于数据流与异步处理：Redux-Saga 强制单向数据流，所有状态变化通过 action 和 reducer 完成，异步逻辑独立于 UI，便于测试和调试；MobX 则允许多个 store 直接修改状态，异步逻辑更简洁，但数据流不如 Redux 清晰。
4. 【回答框架 4】适用场景上，Redux-Saga 适合大型应用、团队协作和复杂异步交互，如权限校验、WebSocket 重连等；MobX 适合中小型项目、原型开发和对开发效率要求高的场景，但需警惕过度使用导致状态管理混乱。选择应基于项目规模、团队熟悉度和复杂度，没有绝对优劣。
5. 【回答框架 5】性能方面，Redux-Saga 需要编写大量样板代码，但状态更新可控；MobX 通过精细依赖追踪减少不必要的渲染，但优化不当可能引发性能问题。实际项目中，两者也可结合使用，如用 Redux 管理全局状态，用 MobX 管理局部复杂状态。
6. 【关键点 1】Redux-Saga 使用 Generator 函数处理副作用，MobX 使用响应式依赖追踪。
7. 【关键点 2】Redux-Saga 强制单向数据流，MobX 允许直接修改状态。
8. 【关键点 3】Redux-Saga 适合复杂异步流程，MobX 适合中小型应用。
9. 【关键点 4】Redux-Saga 样板代码多但可预测，MobX 开发效率高但约束少。
10. 【易错点 1】将 Redux-Saga 与 Redux 混为一谈，实为中间件。
11. 【易错点 2】误以为 MobX 无法用于大型应用，但通过设计模式可扩展。
12. 【易错点 3】忽略响应式追踪可能引入意外的重新渲染，需合理组织状态。