告别React束缚？聊聊HTMX如何提升开发效率与降低项目复杂度

React其实是「高级Polyfill」

• 在2010年代中期尚未成熟的Web平台上，React是非常出色的“填补漏洞”（Polyfill）。
• 当时的浏览器API非常贫弱，制作复杂UI极其困难。
• 如今浏览器的原生功能（HTML/CSS/Web API）已经充分追赶上来，并且还在持续进化。

JavaScript本来就应该只负责「一点点小事」

• 现代的原生HTML/CSS/JS已经能覆盖绝大多数使用场景。
• 没有必要把状态管理和DOM构建全部丢给JavaScript来一肩扛。
• 过程式（procedural）的JavaScript绝不是坏事。
• 过去过程式代码（jQuery时代等）被批评，主要原因是当时的DOM操作API太弱。
• 现在标准API已经非常优秀，几乎不会轻易写成意大利面条代码。
• 如果只是局部修改DOM的小操作，使用原生过程式JavaScript才是最简单、最没有冗余的方式。

思考层级的对比：拖拽排序（Drag and Drop）的实现

• 思考的层级（抽象层）越少越好。
• 用React实现DnD的情况：
  • 必须同时在意虚拟DOM和真实DOM两个世界。
  • 状态更新、再渲染优化、useEffect依赖数组……要不停和React自己的规则搏斗。
  • 本来只想让元素动一动，却写了一大堆为了遵守框架规矩的代码。
• 用过程式（原生JS等）实现DnD的情况：
  • 只需思考「如何操作已经存在的真实DOM」这单一层级。
  • 配合轻量级库（例如SortableJS），直接操作DOM就能搞定。

从「React生态诅咒」中解放出来

• 即使没有React专属的库，生产力也能保持很高。
• 只要会写Tailwind CSS，就算不用React，UI搭建速度也完全够快。
• 浏览器原生标签进化非常显著。
  • 使用 <dialog> 标签，焦点捕获、按Esc关闭等行为浏览器自动帮你处理。
  • 善用 <template> 标签，即使是SPA级别的交互也能用过程式轻松实现。
• 复杂的动画现在用标准CSS就能很好地完成。

Web应用架构的自然形态

• Next.js全栈开发的局限性
  • 和React耦合太深，前后端边界模糊。
  • 缺少Rails、Laravel等成熟后端框架标配的功能：认证授权、ORM、后台任务、邮件发送、文件存储操作等生态。
• 重新审视MPA（多页面应用）
  • 服务器直接返回HTML，这是Web最标准的通信方式，也最自然。
  • Turbo 或 HTMX 正是这种标准方式的优秀延伸。
  • 把状态管理交给服务器，客户端只负责把收到的HTML片段替换进去即可。

总结

• 「没有React生态就开发不了」其实是一种错觉。
• 在制作普通Web应用时，不应该引入双重管理等不必要的复杂性。
• 成熟后端框架 + Turbo/HTMX + Tailwind CSS + 少量过程式JS
  这种组合才是思考层级最少、真正实用的最优解。对于希望回归Web本质、追求更高开发效率的开发者，不妨在 云栈社区 的讨论区里交流更多实战心得。