Svelte 码半功倍

Posted 2021-09-28 前端子鱼

你未注意到的最重要的指标。

注意：原文发表于2019-04-20，随着框架不断演进，部分内容可能已不适用。

所有代码都有 BUG，你写的越多，BUG 越多，这很合情合理。

同时，写的越多，费时越多，留给其他事情的就更少，比如代码优化、功能完善或者去户外潇洒而不是蜷缩在笔记本面前。

其实众所周知，项目研发时间和 BUG 的数量，会随着代码库的膨胀呈二次增长，而非线性增长。

这也与我们的直觉相吻合：一个只有 10 行代码的 Pull Request 和 100 行的对比，其适用的审查级别就有所不同。

一旦某个模块肥胖到单屏无法显示完整的话，那么理解这个模块所需的认知和背负的压力便会剧增。然后我们只能通过重构和添加注释（几乎总是导致写更多的代码）来补偿。

这是一个恶性循环。

我们沉溺在性能指标、打包大小以及其他任何可以衡量的指标。

唯独很少关注代码量。

可读性至关重要

我的本意当然并非是将代码压缩为近乎紧凑形式的这类不惜以牺牲可读性为代价的技巧，也不是说千方百计减少代码行数就是可取的目标。

因为这样相当于鼓励原本还算可读的代码 ……

for (let i = 0; i <= 100; i += 1) {
  if (i % 2 === 0) {
    console.log(`${i} is even`);
  }
}

硬生生写成难以理解的代码：

for (let i = 0; i <= 100; i += 1) if (i % 2 === 0) console.log(`${i} is even`);

恰恰相反，我主张的是，我们应该倾向于那些能够让我们自然而然就可以写出更少代码的语言和模式。

没错，我要吹爆 Svelte

Svelte 致力减少你必须编写的代码量。

为了讲清楚这一点，我们对比一下分别用 React、Vue 和 Svelte 三者来实现的一个非常简单的组件。

先来看看 Svelte 的版本：

<script>
  let a = 1;
  let b = 2;
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {a + b}</p>

然后看看 React 版本是什么样的，它可能是这样写的：

import React, { useState } from \'react\';

export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  function handleChangeA(event) {
    setA(+event.target.value);
  }

  function handleChangeB(event) {
    setB(+event.target.value);
  }

  return (
    <div>
      <input type="number" value={a} onChange={handleChangeA}/>
      <input type="number" value={b} onChange={handleChangeB}/>

      <p>{a} + {b} = {a + b}</p>
    </div>
  );
};

最后是使用 Vue 实现的同等功能的版本：

<template>
  <div>
    <input type="number" v-model.number="a">
    <input type="number" v-model.number="b">

    <p>{{a}} + {{b}} = {{a + b}}</p>
  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        a: 1,
        b: 2
      };
    }
  };
</script>

换而言之，同等功能的组件，用 React 来实现，你需要痛击 442 个字符，Vue 是狠打 263 个字符，而 Svelte 只消轻敲 145 个字符。（我是复制源码到粘贴板，然后在终端运行 pbpaste | wc -c 得到的计数结果）。

React 版本足足胖了三倍！

差异是如此明显，反而揭示了它的不同寻常，依据我的经验来看，React 组件普遍比同等功能的 Svelte 组件大 40% 左右。

接下来我们看看 Svelte 的设计特点，它可以帮助开发者更清晰地表达想法：

顶级元素

在 Svelte 中，一个组件的顶级元素可以有任意多个，随心所欲。

而 React 或 Vue，组件必须只能有一个顶级元素。如果尝试在 React 中的组件函数想任性地一次返回两个顶级元素，就会导致语法无效。（你可以使用 <> 代替 <div>，其实道理还是一样的嘛，还会导致额外多一层缩进呢）

在 Vue 中，标记必须放在 <template> 元素中，是不是有点多此一举了。

绑定

在 React 中，要响应输入事件你需要亲力亲为：

function handleChangeA(event) {
  setA(+event.target.value);
}

这么干除了霸占了更多的显示器屏幕空间外，还为 BUG 提供充分的滋养环境。

按理论来讲，输入的值需要自动绑定到 a，反之亦然。不过可惜，这种关系你是不容易清晰地表达出来的。

我们反而有两个紧密耦合在一起 —— 但物理上却是若即若离的代码块（事件处理程序和 value={a} 属性）。

漏屋偏逢连夜雨，你还必须记得使用前置的 + 号来强制转换字符串为数字，否则 2+2 就得到 22 而 不是 4 了。

与 Svelte 一样，Vue 确实提供了一种绑定表达式：v-model 属性，我们仍然需要在使用 v-model.number 时小心谨慎，就算它专门用于数字输入。

状态

在 Svelte 中，可以直接使用赋值运算符来更新组件的状态：

let count = 0;

function increment() {
  count += 1;
}

而在 React 中，我们使用 useState 这个 Hook：

const [count, setCount] = useState(0);

function increment() {
  setCount(count + 1);
}

这看着是多么的拖沓冗长、絮絮叨叨 —— 其实它俩要表达的意思是一模一样的，字符数却相差了近 60%。

阅读源码的时候，就需要消耗你更多的脑细胞来理解作者的意图。

而 Vue 则使用 default export 的方式导出一个 data 函数，该函数返回一个对象字面量，其属性与我们局部变量是相对应的。

像 helper 函数和子组件这类东西，你不能简简单单地导入并在模板中使用，而是必须通过将它们放置到 export default 合适的位置来“注册”一下。

样板代码之殇

以上只是管中窥豹，不过是 Svelte 帮助你在构建用户界面时减少麻烦的冰山一角。

咱还有很多杀手锏的 —— 你比方说响应式的声明，实质上 Svelte 无须显山露水，就已完美替代了 React 的 useMemo、useCallback 和 useEffect 这些样板代码（或者那些在每次状态变化时创建的内联函数和数组的垃圾被回收的开销）。

这是咋弄的？

其实不过是一些与众不同的约束的抉择罢了。

因为 Svelte 实际上是一个编译器，因此不必拘泥于 javascript 的特性：我们可以为如何方便编写一个组件量身定制一个创作体验的过程，而无需百般逢迎 JavaScript 的语义。

这更符合编码的习惯，例如自然而然会使用变量而不是那些代理或者 Hooks，同时还能生成更高性能的程序。

鱼与熊掌，孰能兼得？

---

< The End >

- 窗明几净，静候时日变迁 -