跳到主要内容

~/posts · 2026.10.25

几千行的页面,先把谁管什么拆清楚

App.tsx 和 AppState 越写越大,先搬布局,再理清任务、草稿和配置各自该活多久。

1 分钟 devshan

三月拆桌面端时,App.tsx 已经超过三千六百行。五个工作区、弹窗和文件操作都在里面,找一个按钮得滚过半页不相关的代码。手机的 AppState 也差不多,连接、传输、设置和缓存全挤在一起。

我先搬布局,把桌面壳层、工作区和弹窗提出来,操作方式保持原样。一次只动一层,出错以后比较容易找到是哪里搬漏了。

后面再拆文件控制器、发送控制器、配置和缓存。手机端则把运行连接、文件和传输状态分开。有些逻辑提成函数就够了,没必要为每一段都新建一个类。

最费心的是数据要活多久。发送编辑器关了,附件可能还在上传;文件页切走,任务也得继续。输入框的选区可以跟着组件销毁,草稿和上传状态却要留在外面。认证和文件缓存属于当前存储配置,切配置时得一起换。

拆完组件以后,我沿着切页、关编辑器、换配置和退出程序重新走了一遍,主要看草稿有没有丢、旧请求会不会回来刷新已经离开的页面。之前清理重复类型时还没碰这些大文件,这次总算把它们的状态归属也理了一遍。