2024-04-11 Remix 改变了我编写 dialog 的方式
内容提要
Remix改变了编写dialog的方式，使用Modal Route实现了更合理的业务逻辑拆分，不需要手动维护dialog状态。优点包括更容易处理页面状态和多级弹窗，缺点是依赖框架。
延伸解读
从命令式到声明式的演变
文章回顾了 dialog 编写方式的变迁：React 之前使用命令式（如 window.alert），React 初期转向声明式但导致 useState 爆炸和代码拆分困难。随后采用 Radix UI 的 DialogTrigger 减少状态管理，再回归 HTML native dialog 避免 useState 爆炸，但需配合 useRef。最终在 Remix 中设计 Modal Route，彻底摆脱手动维护 dialog 状态。这一演变反映了对代码简洁性和可维护性的持续追求。
Modal Route 的核心优势
Remix 的 Modal Route 通过路由驱动 dialog，无需手动维护状态。文章指出其优点包括：业务逻辑拆分更合理，disable UI 与 API、member detail 完全隔离，易于测试；更容易处理页面状态，避免多个表单提交状态组合（如 form1.submitting || form2.submitting）；多级弹窗只需重复 Outlet，避免多层嵌套。这些优势源于路由与 UI 的深度集成。
框架依赖的权衡
文章明确指出 Modal Route 的缺点：依赖于 Remix 框架，是 Remix Nested Routes 前提下的实现方案，不符合 Web Standards。这意味着采用该方案会绑定到特定框架，可能影响代码的可移植性和长期维护。读者需在开发效率与框架锁定之间做出权衡，根据项目技术栈和团队偏好决定是否采用。
Q&A
Remix 如何改变 dialog 的编写方式？
Remix 使用 Modal Route 实现了更合理的业务逻辑拆分，简化了 dialog 状态的维护。
使用 Remix 编写 dialog 有哪些优点？
优点包括简化代码、避免手动维护状态、合理拆分业务逻辑和更容易处理多级弹窗。
在使用 React 时，dialog 的编写方式有哪些变化？
最初使用命令式编写，后来转为声明式，最终通过 Remix 的 Modal Route 实现更高效的管理。
使用 Radix UI 的 DialogTrigger 有什么好处？
使用 DialogTrigger 可以减少 useState 的复杂性，避免无用代码的产生。
Remix 的 Modal Route 设计如何处理多级弹窗？
通过简单重复 Outlet 的方式，Remix 使得多级弹窗的处理变得简单，避免了多层嵌套。
使用 Remix 编写 dialog 存在什么缺点？
缺点是依赖于 Remix 框架，不符合 Web Standards。
