注意:原文发表于2019-04-20,随着框架不断演进,部分内容可能已不适用。 所有代码都有 BUG,你写的越多,BUG 越多,这很合情合理。 同时,写的越多,费时越多,留给其他事情的就更少,比如代码优化、功能完善或者去户外潇洒而不是蜷缩在笔记本面前。 其实众所周知,项目研发时间和 BUG 的数量,会随着代码库的膨胀呈二次增长,而非线性增长。 这也与我们的直觉相吻合:一个只有 10 行代码的 Pull Request 和 100 行的对比,其适用的审查级别就有所不同。 一旦某个模块肥胖到单屏无法显示完整的话,那么理解这个模块所需的认知和背负的压力便会剧增。然后我们只能通过重构和添加注释(几乎总是导致写更多的代码)来补偿。 这是一个恶性循环。 我们沉溺在性能指标、打包大小以及其他任何可以衡量的指标。 唯独很少关注代码量。 可读性至关重要我的本意当然并非是将代码压缩为近乎紧凑形式的这类不惜以牺牲可读性为代价的技巧,也不是说千方百计减少代码行数就是可取的目标。 因为这样相当于鼓励原本还算可读的代码 ……
硬生生写成难以理解的代码:
恰恰相反,我主张的是,我们应该倾向于那些能够让我们自然而然就可以写出更少代码的语言和模式。 没错,我要吹爆 SvelteSvelte 致力减少你必须编写的代码量。 为了讲清楚这一点,我们对比一下分别用 React、Vue 和 Svelte 三者来实现的一个非常简单的组件。 先来看看 Svelte 的版本:
然后看看 React 版本是什么样的,它可能是这样写的:
最后是使用 Vue 实现的同等功能的版本:
换而言之,同等功能的组件,用 React 来实现,你需要痛击 442 个字符,Vue 是狠打 263 个字符,而 Svelte 只消轻敲 145 个字符。(我是复制源码到粘贴板,然后在终端运行 React 版本足足胖了三倍! 差异是如此明显,反而揭示了它的不同寻常,依据我的经验来看,React 组件普遍比同等功能的 Svelte 组件大 40% 左右。 接下来我们看看 Svelte 的设计特点,它可以帮助开发者更清晰地表达想法: 顶级元素在 Svelte 中,一个组件的顶级元素可以有任意多个,随心所欲。 而 React 或 Vue,组件必须只能有一个顶级元素。如果尝试在 React 中的组件函数想任性地一次返回两个顶级元素,就会导致语法无效。(你可以使用 在 Vue 中,标记必须放在 绑定在 React 中,要响应输入事件你需要亲力亲为:
这么干除了霸占了更多的显示器屏幕空间外,还为 BUG 提供充分的滋养环境。 按理论来讲,输入的值需要自动绑定到 我们反而有两个紧密耦合在一起 —— 但物理上却是若即若离的代码块(事件处理程序和 漏屋偏逢连夜雨,你还必须记得使用前置的 与 Svelte 一样,Vue 确实提供了一种绑定表达式: 状态在 Svelte 中,可以直接使用赋值运算符来更新组件的状态:
而在 React 中,我们使用 useState 这个 Hook:
这看着是多么的拖沓冗长、絮絮叨叨 —— 其实它俩要表达的意思是一模一样的,字符数却相差了近 60%。 阅读源码的时候,就需要消耗你更多的脑细胞来理解作者的意图。 而 Vue 则使用 default export 的方式导出一个 像 helper 函数和子组件这类东西,你不能简简单单地导入并在模板中使用,而是必须通过将它们放置到 export default 合适的位置来“注册”一下。 样板代码之殇以上只是管中窥豹,不过是 Svelte 帮助你在构建用户界面时减少麻烦的冰山一角。 咱还有很多杀手锏的 —— 你比方说响应式的声明,实质上 Svelte 无须显山露水,就已完美替代了 React 的 这是咋弄的? 其实不过是一些与众不同的约束的抉择罢了。 因为 Svelte 实际上是一个编译器,因此不必拘泥于 JavaScript 的特性:我们可以为如何方便编写一个组件量身定制一个创作体验的过程,而无需百般逢迎 JavaScript 的语义。 这更符合编码的习惯,例如自然而然会使用变量而不是那些代理或者 Hooks,同时还能生成更高性能的程序。 鱼与熊掌,孰能兼得? < The End > - 窗明几净,静候时日变迁 - |
|