最近前端圈有两个热门的框架。一个是React 18 alpha。带来了并发渲染等新特性。另一个是SolidJS。一个细粒度响应式的新框架。性能非常出色。很多人在问到底该选哪个。本文从多个维度对比这两个框架。

一、两个框架的基本介绍

React是Facebook开发的前端框架。2013年开源。目前是最主流的前端框架。React 18是下一个大版本。目前处于alpha阶段。主要新特性包括并发渲染、自动批处理、Suspense改进、startTransition API等。核心目标是提升用户体验。

SolidJS是Ryan Carniato开发的前端框架。核心特点是细粒度响应式。没有虚拟DOM。状态变化的时候直接更新对应的DOM节点。性能非常出色。API设计和React很像。用JSX。有createSignal、createEffect、createMemo等API。React开发者可以很快上手。

二、性能对比

SolidJS最大的优势就是性能。因为它没有虚拟DOM。状态变化的时候直接更新DOM。不需要diff。不需要重新渲染组件。

比如你有一个组件。里面有一个状态count。count变化的时候。React会重新渲染整个组件。然后diff虚拟DOM。找到变化的地方更新DOM。而SolidJS只会更新count对应的那个DOM节点。其他部分完全不动。

这种细粒度的更新方式。在复杂应用中性能优势非常明显。在官方的性能测试中。SolidJS在很多项目上都名列前茅。比React快不少。

React 18也在性能上做了很多改进。并发渲染让React可以同时准备多个版本的UI。在处理大量更新的时候不会阻塞主线程。自动批处理减少了重新渲染的次数。但是React的基本架构没有变。还是虚拟DOM。还是组件级别的重新渲染。所以在细粒度更新方面。还是不如SolidJS。

三、开发体验对比

React经过这么多年的发展。开发体验已经非常成熟了。Hooks让逻辑复用变得很方便。React DevTools非常强大。文档非常完善。教程和示例很多。

SolidJS的开发体验也不错。特别是对React开发者来说。API设计很像。SolidJS的响应式系统比React更直观。不需要手动指定依赖。自动追踪。比如React里你要写useEffect(() => { console.log(count) }, [count])。而SolidJS里只需要写createEffect(() => { console.log(count()) })。不需要指定依赖。

但是SolidJS也有一些不习惯的地方。比如signal是函数。要加括号才能取值。count()而不是count。SolidJS的DevTools还在开发中。不如React DevTools成熟。

四、生态对比

React的生态是所有前端框架中最完善的。UI组件库有Ant Design、Material UI、Chakra UI等。状态管理有Redux、MobX、Zustand、Recoil等。路由有React Router。数据请求有React Query、SWR。几乎所有的第三方服务都有React的SDK。找工作的时候React的岗位也最多。

SolidJS的生态还在发展中。不如React完善。官方提供了solid-app-router作为路由库。有solid-primitives提供常用的hooks。但是和React比起来。生态还是差很多。很多常用的库没有SolidJS版本。需要自己封装。

五、学习曲线

React的入门不难。但是深入不容易。你需要理解hooks的规则。需要理解依赖数组。需要理解闭包陷阱。需要理解重新渲染的时机。这些概念需要花时间去理解。

SolidJS的入门也不难。特别是对React开发者来说。但是SolidJS的响应式模型和React不一样。需要理解细粒度响应式的概念。不过一旦理解了。你会发现它比React更简单。因为没有依赖数组。没有闭包陷阱。

六、我的建议

如果你是在做公司的正式项目。选React。原因很简单。React的生态完善。招人容易。稳定性有保障。对于公司项目来说。这些因素比性能更重要。

如果你是在做个人项目或者小工具。可以试试SolidJS。个人项目没有那么多约束。可以尝试新技术。SolidJS的性能很好。开发体验也不错。

如果你在做性能敏感的应用。可以考虑SolidJS。比如实时数据大屏。复杂的可视化编辑器。但是在选之前。一定要评估好生态的问题。

七、写在最后

React和SolidJS都是优秀的前端框架。各有各的优势。React的优势是生态完善。工具成熟。适合大型项目。SolidJS的优势是性能出色。响应式模型优雅。适合性能敏感的场景。

技术选型没有标准答案。要根据项目的需求和团队的情况来综合考虑。对于大部分人来说。React依然是最稳妥的选择。但是也可以关注一下SolidJS。它代表了前端框架的一个发展方向。

最后用一句话结束本文："没有最好的框架。只有最合适的框架。"