深入浅出 solid.js 源码 （二）—— 从 react 到 solid.js

这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

上一篇介绍了 svelte.js，这一篇要开始正式认识我们的主角 solid.js 了。solid.js 在设计理念上借鉴了 svelte.js，因此 solid.js 本身也是一个重编译轻运行时的库，它也没有采用虚拟 DOM，因此使用 solid.js 开发的应用性能也非常好，有多好呢，直接看非常流行的这张图：

除了原生 js，在所有的参与对比的 UI 库中，solid.js 的速度是最快的，性能方面就不需要多说了。

当然了，只是空谈性能没有任何意义，使用库的目的还是提升开发效率，如果用起来和原生 js 相比没有明显提升那就失去了库原本的意义。接下来我们来看编码体验，以一个简单的计数器的实现为例，如果使用 react 开发，写出来代码时这样的：

function Count() {
	const [num, setNum] = useState(0);
	return (
		<div>
			{num}
			<div onClick={() => setNum((p) => p + 1)}>+</div>
			<div onClick={() => setNum(0)}>reset</div>
			<div onClick={() => setNum((p) => p - 1)}>-</div>
		</div>
	);
}

react 开发者对此一定不陌生，但是只要在上面的写法上简单地改一改，就会变成 solid.js 版本的计数器：

function Count() {
	const [num, setNum] = createSignal(0);
	return (
		<div>
			{num()}
			<div onClick={() => setNum((p) => p + 1)}>+</div>
			<div onClick={() => setNum(0)}>reset</div>
			<div onClick={() => setNum((p) => p - 1)}>-</div>
		</div>
	);
}

useState 改成 createSignal，num 变成 num()，只有简单的两处修改，我们就从 react 迁移到了 solid.js。真实的应用当然不可能只改两处，这里想表达的是，使用 solid.js 开发体验也很好，在拥有最接近原生 js 的性能的前提下，solid.js 还具有现代化的开发 API，不会影响开发效率。

不过前面也说过，虽然看上去和 react 非常像，但是 solid.js 和 react 在原理上是有非常本质的区别的，除了 tsx 外甚至可以说是毫不相干。后面我们会从计数器的例子开始切入，看下在 react 版本和 solid.js 版本中，库本身都做了哪些事情。