文章探讨了函数式编程如何深刻影响并改变了前端开发模式。作者通过与一位长期从事后端开发的老友对话，对比了过去直接操作DOM、自然层叠CSS的传统方式与如今React等抽象化框架的差异，反思现代前端技术栈似乎与浏览器原生平台"对抗"的现状。作者结合自身从早期浏览器战争至今的从业经历，分析了这一演变过程及其影响。

函数式编程如何塑造（与扭曲）现代前端开发

一位长期从事后端开发的朋友偶然打开一个现代React代码库时惊呼："我们是不是抛弃了CSS层叠？谁让网页变成这样的？"这引发了我对前端演变历程的思考。

网页的本质与函数式理想的冲突

网页天生具有副作用： - CSS全局层叠是设计特性而非缺陷 - DOM本身就是可变的树状结构 - 用户交互天然异步且不可预测

这种"混乱"恰是网页成功的关键：保持数十年向后兼容，支持数十亿设备互通。浏览器的开放性正是其超能力所在。

函数式编程理念的渗透

React并非起点，早在2009年Underscore.js就引入了map/reduce等概念。但React确实将"UI=状态函数"的理念推向主流： - Redux受Elm语言启发实现(state,action)=>newState - Hooks取代类组件实现函数式组合 - 副作用被约束到useEffect中

这些创新解决了早期jQuery代码难以维护的问题，但也埋下了隐患。

现代前端实践的代价

CSS-in-JS的悖论： - 为消除全局样式发明运行时CSS生成 - 却阻塞主线程、增加SSR复杂度 - 最终转向Tailwind仍拒绝层叠特性

合成事件的代价： - 包装原生事件系统增加间接层 - 开发者逐渐遗忘addEventListener - 调试时面临额外抽象层

* hydration的荒诞性*： - 服务端渲染HTML后客户端重新构建 - 相同数据请求执行两次 - 页面可见但交互冻结的"僵尸期"

组件库的困境： - 用div重写原生

评论总结：

1. 前端框架与原生组件的辩证关系

   • 观点：前端框架推动了原生组件的发展，而非阻碍
   • 引用：
     "we wouldn’t have gotten all those nice DOM native components if libraries and frameworks hadn’t popularised them" (davedx)
     "The dialog element is new! Only broadly supported since 2022" (madeofpalk)

2. 函数式编程的争议

   • 观点：函数式范式被过度使用，但并非前端复杂化的主因
   • 引用：
     "I see so much convoluted code with arr.reduce()... simpler with for-loop" (madeofpalk)
     "React just provided a good abstraction... It’s a meritocracy" (davedx)

3. 数据流与组件结构的矛盾

   • 观点：HTML层级结构与数据流需求不匹配，破坏模块化
   • 引用：
     "D3 wants to send data to C3? Well then B must own the data" (ninetyninenine)
     "how data flows... is actually a separate graph structure" (ninetyninenine)

4. CSS管理的困境

   • 观点：开发者回避CSS规范，依赖工具（如Tailwind）解决团队协作问题
   • 引用：
     "Tech leads didn’t want to monitor CSS... opted for Tailwind" (prinny_)
     "CSS cascades globally... makes complex sites a nightmare" (nielsbot)

5. 对React生态的批评

   • 观点：React性能差且复杂，但平台未适配开发者需求
   • 引用：
     "React is the farthest thing from functional" (breadwinner)
     "Why don’t platforms adapt to how developers work best?" (didibus)

6. 历史视角与替代方案

   • 观点：早期方向（如jQuery）可能更优，HTMX等新方案受关注
   • 引用：
     "jQuery got closer to great... we should cycle back" (smrtinsert)
     "Is HTMX any good? It’s a plug for HTMX" (Animats)

7. 职业发展反思

   • 观点：框架知识非长久之计，需夯实基础
   • 引用：
     "Knowing React well isn’t lasting career knowledge" (vinceguidry)
     "FE code quality doesn’t matter? It’s too standardized" (gjgtcbkj)

总结呈现了支持与反对现代前端开发的平衡观点，核心争议集中在：框架价值、函数式范式适用性、数据流设计、CSS管理策略，以及历史技术路线的反思。