就他妈用 React

# 就他妈用 React 来源：https://justfuckingusereact.com/ ## 就他妈用 React（或者其他任何框架，你个该死的勒德分子） - 内容（https://justfuckingusereact.com/#start） - 这他妈是怎么回事？（https://justfuckingusereact.com/#wtf） - 我他妈的为什么要放弃我的“纯 HTML”极乐世界，去搞这玩意儿 JavaScript 巫术？（https://justfuckingusereact.com/#why） - 组件，你他妈懂吗？（https://justfuckingusereact.com/#components） - 更聪明的 UI 更新，让你不用再当个操弄 DOM 的贱民。（https://justfuckingusereact.com/#ui） - 规模化实现可访问性？祝你好运，用你那“语义化”的 div 汤和祈祷吧，傻逼。（https://justfuckingusereact.com/#accessibility） - 开发者体验（DX）确实他妈重要，除非你喜欢受罪。（https://justfuckingusereact.com/#developer-experience） - 性能不只是初始加载，你个目光短浅的蠢货，它关乎感知性能和交互体验。（https://justfuckingusereact.com/#performance） - 但那他妈的臃肿呢？JavaScript 超载呢？我的用户在南极洲用拨号上网！（https://justfuckingusereact.com/#bloat） - 我到底什么时候该他妈用 React（或类似框架），你个学得慢的蠢货？（https://justfuckingusereact.com/#when） - 真正他妈的的问题不是 React。是你，你个被误导的蠢蛋。（https://justfuckingusereact.com/#problem） - 页脚（https://justfuckingusereact.com/#footer） 听着，我懂。你见过那个傻逼网站。“HTML 是王道”、“保持简单，笨蛋”、“我 98 年的 GeoCities 页面加载速度仍然比你的 SPA 快。”真他妈可爱。就像个小孩骄傲地展示一个泥饼。这想法不错，就像希望我们都能回到用贝壳以物易物的时代，而不是去他妈的股市打交道。但网络他妈的已经不只是小册子的集合了，你个老古董。它是工作完成的地方，是社区建立的地方，是复杂交互发生的地方。你知道的，那种真正能*做*点事的东西，而不是仅仅展示你的“漂亮他妈按钮”。 ## 那么，这他妈是怎么回事？ 这是要承认：有时候，复杂不是选择，而是他妈的必需品。当这种复杂性来临时，试图用 `document.getElementById` 加上祈祷来对付它，就像他妈的用冰棒棍和胶水造航天飞机。你可能搞出一个看起来像航天飞机的东西，但会是个摇摇晃晃、不可维护、他妈吓人的一坨屎，在发射台上就爆炸。这是呼吁你们去拥抱那些聪明混蛋造的工具，用来解决难题，这样你就能专注于造你酷毙了的东西，而不是在这个冲刺里第八十七次他妈的重新发明轮子，你个顽固的蠢货。 ## 我他妈的为什么要放弃我的“纯 HTML”极乐世界，去搞这个 JavaScript 巫术？ 因为你不只是他妈的石板上显示静态文字，对吧？你想造一些交互式的、动态的、不让用户想用生锈勺子抠眼珠的东西。你想造一个*应用*，而不是他妈的传单。以下是你为什么就该他妈用 React（或 Vue、或 Svelte、或 Angular，如果你是个受虐狂——关键是现代的框架，你个穴居人）： ### HTML 的“交互性”他妈的只适合留言板和马戏团杂耍，不适合真正的应用，你个妄想症的蠢货。 “但 HTML 有 `<button>` 和 `<input>` 还有表单啊！”是啊，你的小孩还有蜡笔呢。可爱，但也不是用来设计他妈摩天大楼的工具对吧？你以为你能用这些 HTML “交互”元素加上一点 `onClick` 就造出实时协作编辑器、动态交易仪表盘或企业级项目管理工具？你在做梦，你个了不起的傻瓜。那玩意儿只适合做一个按钮说“噗！”而不是编排复杂的用户工作流。HTML 给了你他妈一颗鹅卵石；框架给了你一座他妈采石场和重型机械，用来造堡垒。你要用你那颗鹅卵石造什么？嗯？一个真他妈漂亮的镇纸？ ### 状态管理，你个无知猿猴！哦，你觉得通过切换一个类来管理“点赞”按钮的状态就是极致的复杂？可爱。试试造一个带十几个筛选器的仪表盘，十个不同源的实时更新，改变一切的用户偏好，还有五个混蛋同时在敲键盘的协同编辑。你那“简单”的 JavaScript 会变成一坨意大利面怪物，让克苏鲁看起来都像个他妈的在开茶话会的天线宝宝。框架给了你管理这种混乱的合理方式。没有它们，你他妈的就像在迎风撒尿，指望一个全局变量不会狠狠操翻你。 ### 组件，你他妈懂吗？还记得你复制粘贴了同一个导航栏 HTML 到 30 个不同的页面，然后因为客户想要一个新链接，你不得不在 30 个地方更新它？是啊，真他妈聪明。你可能觉得自己是个天才。像 React 这样的框架强迫你用可复用、封装好的组件来思考。一次构建一个按钮，一次设计样式，一次添加逻辑，然后在任何地方复用那个漂亮的混蛋。在一个地方修改，它就在所有地方更新。这不只是方便；在规模化时，这是他妈的理智，你个重复的笨蛋。 ### 更聪明的 UI 更新，让你不用再当个操弄 DOM 的贱民。还记得每当一条数据变化时，你要手动更新页面上十几个不同部分？你会在那里，逐一告诉每个 `<div>` 和 `<span>` 刷新，祈祷没漏掉一个，或者没导致整个该死页面像被瘾君子附身的鬼电视一样闪烁。框架就是用来聪明地处理这档子事的。你告诉它们基于你的数据，你的 UI *应该*长什么样。当数据变化时，框架来做繁重的工作。这就像有个超级聪明的助手，只重画那些真正需要重画的部分，而不是你每次挪动一把椅子就把整个房子重新刷一遍漆。你真的要像数字洞穴人一样，命令式地戳 DOM 吗？ ### 规模化实现可访问性？祝你好运用你那“语义化”的 div 汤和祈祷吧，傻逼。 “就用语义化 HTML！”他们尖叫，好像发现了他妈的罗塞塔石碑。真他妈有开创性。那是 Web 开发 101，你个居高临下的混蛋。但当你那“简单”的 HTML 标签不足以满足你的应用*实际需要*的复杂、自定义 UI 时怎么办？想想自定义的数据表格（排序和筛选）、不糟糕的可访问组合框、或者屏幕阅读器能实际导航的树形视图。你以为把 `role="button"` 放在一个 `<div>` 上就算完事，你的应用就可访问了？滚他妈的蛋。真正的复杂组件可访问性意味着细致的 ARIA 属性、健壮的焦点管理和正确的键盘导航。用你那“只用 HTML 和纯 JS”的方式，你要为*每个实例*手工操作，祈祷别搞砸了，让某个可怜的家伙日子不好过。框架让你一次性构建一个*可访问的组件*，搞定所有这些破事，然后复用，确保一致性。还是你要告诉我，你*喜欢*在 50 个不同的手风琴菜单上手动管理 `aria-expanded`，你个该死的受虐狂？“只用 HTML”做复杂应用，常常变成“只他妈对除了你之外的人不可访问”。 ### 那“简单”的 HTML 外表下藏着一堆你死活不愿承认的蹩脚手动 JS 破事，你个鸵鸟。 “没有水合错误！没有树摇！”他们吹嘘，好像这些是撒旦派来的瘟疫，而不是针对那些*你会遇到*的复杂问题的精巧解决方案，只要你建造比“建设中” GIF 更高级的东西。避免框架解决方案并不会让问题消失，蠢货；它只会让你*你自己*现在开始手动与 DOM 差异比较、状态传播、代码分割和性能优化作斗争，可能还笨拙得像头喝醉的驴。你不是选择了“简单”；你是选择了无数次地、糟糕地重新发明轮子，并称之为“手工艺纯洁性”。这就像吹嘘你的车没引擎，然后你光着脚在暴风雪中推着它上坡，大喊“没事的！” ### 依赖 HTML 自动全局 JS 变量？那是他妈的 Web 侏罗纪时期的业余把戏，你个菜鸟黑客。 所以 HTML 神奇地为任何有 `id` 的元素创建一个 JavaScript 变量？哇，好一个“特性”——来自 1998 年，那时你的调制解调器听起来像垂死的机器人。依赖这个就像把房子建在湿透的卫生纸上然后指望最好。它污染了全局命名空间，制造了难以调试的命名冲突，是通往脆弱、不可维护代码库的单程票，会让你未来的自己（以及任何必须碰它的人）诅咒你的存在。框架把你连踢带拽地拖向理智：作用域组件、显式的 props、以及实际的状态管理解决方案，它们不依赖祈祷 `window.myFuckingButton` 不会被其他什么破代码覆盖。那不是 HTML “借出拐杖”；那是 HTML 在你代码里他妈的埋地雷，你个无知的笨蛋。 ### 开发者体验确实他妈重要，除非你喜欢受罪。 热模块替换？在不丢失状态的情况下即时看到你的改动。带 TypeScript 的类型化 JavaScript？在错误进入生产环境让你看起来像个白痴之前就抓住它们。一个庞大的库生态系统，涵盖从国际化到动画的方方面面？Linters、格式器、调试器，它们实际有用，而不是让你想砸屏幕？框架，尤其是 React，带来了整个生态系统，让你作为开发者的生活不那么悲惨。这意味着你可以更快、更好地造东西。别再假装在纯 JS 里与浏览器怪癖和 `document.write` 搏斗是什么高尚的、塑造品格的行为了。这他妈的只是愚蠢。 ### 性能不只是初始加载，你个目光短浅的蠢货，像个原始页面速度偏执狂一样；它关乎感知性能和交互体验。 “我的 HTML 站点 50ms 加载！”酷。现在加上用户登录、动态内容、筛选、排序和实时更新，而页面不会他妈的崩溃。框架，尤其是与它们的扩展生态系统配合时（比如 React 的 Next.js 或 Remix），给你工具如代码分割（只加载当前页面需要的 JS，而不是整本电话簿）、服务器端渲染（SSR）或静态站点生成（SSG），用于快速初始加载*和*动态能力，以及感觉瞬间完成的客户端导航。你可以造一个闪电般的*应用*，而不是一个快速但屁都干不了的文档。 ## 但那他妈的臃肿呢？JavaScript 超载呢？我的用户在南极洲用拨号上网！ 没错，框架里的“Hello World”比 HTML 里的“Hello World”大。**废话，夏洛克。** 你要在生产环境造个“Hello World”应用？如果你要给阿姨的遛狗生意（自 2003 年以来就没顾客了）造一个五页静态宣传网站，那么是的，看在上帝的份上，就用 HTML 和 CSS。另一个网站这点说得对。你不需要他妈的一把火箭筒去打苍蝇。但如果你在造： - 一个 SaaS 平台 - 一个带有复杂购物车和用户账户的电商网站 - 一个社交媒体信息流 - 一个项目管理工具 - 一个数据可视化仪表盘 - 任何需要大量客户端交互和状态管理、并且需要正常*工作*的东西 ... 那么框架的“臃肿”就是做复杂生意的代价，你个吝啬鬼。而且现代工具（树摇、代码分割、懒加载）帮你显著减轻这个代价。关键是为他妈的正确的工作选择合适的工具，而不是顽固地用螺丝刀当需要大锤的时候。 ## 所以，我到底什么时候该他妈用 React（或类似框架），你个学得慢的蠢货？ - 当你的应用有**非平凡的客户端状态**需要管理时。 - 当你需要**可复用的 UI 组件**来构建一致且可维护的界面时。 - 当你在构建**单页应用**或感觉像应用而不是文档的东西时。 - 当你在**团队**中工作，需要共享的结构和模式时。 - 当**交互的复杂性**在纯 JS 中会导致难以管理的意大利面条式代码时。 - 当你想利用一个**丰富的生态系统**，包含久经考验的库和工具时。 - 当复杂功能的**开发者速度**比为了一个大多是静态的页面削减每一个最后字节更重要时。 ## 真正他妈的的问题不是 React。是你，你个被误导的蠢蛋。 是那些开发者用他妈核弹去砸开一颗坚果。是不解其意而盲目追随最新技术。是试图用微服务、Kubernetes 和二十人团队来造一个简单的联系表单，而一个 mailto 链接就能搞定。**这就像用他妈军用级火焰喷射器去点你奶奶的生日蜡烛——他妈的完全是过度杀伤，你个无知的蠢货。** 但是别因为有些白痴不知道怎么正确使用电动工具、把鸡鸡切掉，就连洗澡水和孩子一起倒掉。React 及其同类是强大的工具，解决了真实、复杂的问题。问题不在于工具，而在于那个不恰当地挥舞工具的蠢货。 所以，对于你下一个复杂、交互式、数据驱动的 Web 应用……看在所有神圣的东西份上，**就他妈用 React**。别在假装你因为太纯洁而不用它，或者你那“手工艺”纯 JS 除了是在求救之外还有什么别的意义。你的用户（以及未来要维护你那“手工制作”噩梦的你自己）会感谢你的。现在滚回去干活，造点他妈了不起的东西，而不仅仅是另一个显示你固执的 HTML 纪念碑。 **创建者：** Omercan（GitHub（https://github.com/obsfx）/ Twitter（https://x.com/obsfx）/ Bluesky（https://bsky.app/profile/omercan.io）） Burak（GitHub（https://github.com/burakcan）/ Twitter（https://x.com/neoberg）/ Bluesky（https://bsky.app/profile/burakcan.me）） 灵感来自 justfuckingusehtml.com（https://justfuckingusehtml.com/） **在 GitHub 上查看源代码（https://github.com/burakcan/just-fucking-use-react）**