React跑了12年,最后接住了我外婆的老花镜

去年深冬回杭州,刚把行李箱撂在玄关,外婆就攥着她那台贴了钢化膜、壳子磨白的旧安卓手机凑过来,屏幕亮着,字小到要凑到离眼睛十厘米的地方。“囡囡,你上次给我弄的那个看照片的小程序,字怎么又变小了?我点半天,都找不到你表妹在国外拍的那个下雪的照片。”

我接过手机点进去,熟悉的加载动画转了半圈——那是我2018年刚学React不久,在出租屋里熬了三个晚上写的家庭相册小程序,代码到现在还躺在我GitHub的私有仓库里,commit记录停在2020年我妈硬塞给我三百张我小时候的春游照片,我改了一下午的列表排序。

那个2014年的愚人节玩笑

我第一次知道React,是大三那年刷前端论坛,帖子标题写着“Facebook愚人节整活,把HTML写进JS里是疯了吗”。点进去看,满屏的嘲讽,说这东西破坏了Web开发几十年的规矩——HTML、CSS、JS各管一摊,凭什么要把标签直接写在JS逻辑里?

我当时刚写了半学期的jQuery项目,为了改个按钮的样式,要在三个文件里跳来跳去,看到那个JSX的示例代码时,鬼使神差地跟着教程敲了三行。

真的。

跑通的那一刻,我对着机房的老旧显示器愣了半分钟。

2014年React首次开源官方公告页面截图
2014年React首次开源官方公告页面截图

说实话,那感觉就像你骑了十年的二八大杠,突然有人塞给你一辆带减震的山地车——之前要费半天劲拧螺丝调链条的事儿,现在握个车把就能搞定。室友凑过来看我屏幕上的<App />,笑我是不是被邪教洗了脑,放着好好的jQuery不用,跑去用Facebook搞的“异端框架”。

谁能想到呢。

当年论坛上骂得最凶的几个博主,后来全成了React社区的核心贡献者。我记得2019年Hooks刚出来的时候,整个圈子又炸了一轮,有人说这是把面向对象的根基刨了,有人说函数组件写出来的逻辑像一团乱麻。我当时赶项目,硬着头皮把原来的类组件全改成useState,改到凌晨三点的时候电脑蓝屏了,对着屏幕骂了十分钟,说早知道就不折腾了。

外婆手机里藏着的虚拟DOM

我当初写那个家庭相册的时候,根本没把什么虚拟DOM、diff算法当回事——教程里说这东西性能好,我就照着用,连key值都图省事直接用数组的下标。结果我妈往相册里传了三百张照片之后,翻页的时候开始卡,有时候划一下,屏幕要顿两秒才能出下一张图。

我当时盯着控制台的警告信息,才反应过来那个被我忽略了无数次的key值警告,到底在说什么。

React虚拟DOM对比真实DOM更新流程示意图
React虚拟DOM对比真实DOM更新流程示意图

我花了一下午把所有列表的key改成了照片的拍摄时间戳,再把小程序传到外婆的手机上,她划着屏幕翻照片,从满月照翻到小学运动会,翻到去年西湖边的荷花,全程丝滑,没有卡顿。

那瞬间我突然懂了之前背了无数遍的八股文到底在说什么。

那个跑在手机内存里、看不见摸不着的diff算法,从来不是什么高高在上的技术概念——它就像外婆当年整理实体相册的动作,把每一张照片按时间排好,不会翻着翻着就把去年年夜饭的照片,窜到我小学第一次戴红领巾的那页去。它省下来的每一次DOM重绘,最后都变成了外婆不用凑到屏幕前等加载的那两秒。

之前总觉得,React是给大厂做复杂中后台系统的,要搭状态管理,要做权限控制,要处理几万条数据的表格渲染,是年轻人在写字楼里熬大夜的工具。直到外婆举着手机给我看,说现在字大了,我自己就能翻到你表妹拍的雪,不用喊你妈帮忙,我突然觉得,之前那些为了调bug熬到的夜,那些在Stack Overflow上翻到的帖子,那些和同事吵到面红耳赤的“到底是用Context还是用Redux”的争论,突然就有了落点。

被写在代码里的“不打扰”

被写在代码里的“不打扰”
被写在代码里的“不打扰”

上个月我在公司做项目,把原来的SSR页面改成了React Server Components版本,打包体积小了60%,首屏加载速度快了一倍还多。上线那天我盯着性能监控面板,第一反应是,这技术要是早个五年出来,我当年给外婆写的那个相册,就不会在她乡下信号差的时候,转三秒的加载圈才能进去。

不过话说回来,现在的React早就不是当年那个被骂的异端了。它跑在全世界一半的网站上,跑在外卖软件里,跑在医院的挂号系统里,跑在无数普通人每天都要打开的小程序里。可我见过太多人写React项目的时候,总想着要加多少酷炫的动效,要塞多少弹窗广告,要做多少复杂的交互,最后把本来简单的页面,堆得像个跑不动的杂货铺。

我那个家庭相册小程序,到现在都没有开屏广告,没有弹窗推荐,没有什么“邀请好友得积分”的活动。点进去就是按时间排好的照片,字可以调得很大,翻页很顺,不会在你看照片的时候突然弹出来一个让你下载APP的提示。

上次我刷React Conf的线上直播,台上的工程师在讲2024年的新编译特性,讲怎么把组件的渲染性能再提30%,讲怎么把服务端和客户端的边界划得更清晰。我看着看着就把直播窗口切了,给外婆打了个视频电话。

她举着手机给我看,屏幕上是那张去年夏天我陪她在西湖边拍的荷花,字很大,清晰得能看到花瓣上的水珠。“这个相册好用的很,”她笑着说,“我昨天还给楼上的张阿姨推荐了,她说她也想存她孙子的照片。”

我突然就想起10年前在机房里,那个第一次敲下<App />的我,当时满脑子想的都是“这个框架好酷,我要把它写在简历上”。他大概永远不会想到,自己当年抱着凑热闹心态学的那个“异端框架”,最后会变成他外婆不用戴老花镜,就能顺顺当当看到所有想念的人的通道。

现在我写代码的时候,还是会经常卡壳,还是会因为一个bug熬到凌晨,还是会在看到新的技术特性的时候焦虑,怕自己学慢了被行业淘汰。可每次我打开那个家庭相册的代码仓库,看到commit记录里那些改key、调字体大小的提交,就会突然松口气。

我们总在追新的技术,总在讨论哪个框架更先进,哪个写法更优雅,可那些写在屏幕上的代码,最后真正的重量,从来不是简历上的亮眼项目,不是GitHub上的星标数量,是它跑在某个普通老人的手机里的时候,没有打扰,没有卡顿,打开就能看到自己想念的人。

作者|大讲堂

排版|大讲堂

审核|小准

免责声明:市场有风险,选择需谨慎!此文仅供参考,不作买卖依据。如有侵权请联系删除。
文章名称:React跑了12年,最后接住了我外婆的老花镜
文章链接:https://www.lfdjt.com/info_23_25684.html