Svelte 码半功倍

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

注意：原文发表于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 的版本：

{a} + {b} = {a + b}

然后看看 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 (
    

      
      

      
{a} + {b} = {a + b}
    
  );
};

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

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

React 版本足足胖了三倍！

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

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

顶级元素

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

而 React 或 Vue，组件必须只能有一个顶级元素。如果尝试在 React 中的组件函数想任性地一次返回两个顶级元素，就会导致语法无效。（你可以使用 <> 代替

，其实道理还是一样的嘛，还会导致额外多一层缩进呢）

在 Vue 中，标记必须放在