SolidJS 正式发布：通往 1.0 的漫漫长路

一路走来，真是漫长。时间太长了，我甚至记不清自己是什么时候开始的。我登录了一个旧的私人 Bitbucket 仓库，在一个恰如其分地命名为“框架”的仓库中，找到了一个“初始提交”，日期是 2016 年 8 月 21 日。但我确信那是我第二个反应式 JavaScript 框架的原型，它最终成为了SolidJS。

所以我可以肯定地说，一个稳定的版本至少耗费了数千小时和五年的时间才得以完成。但我敢肯定，Reddit/HN 上的评论者们读不到这里就会说“又一天，又一个新的 JavaScript 框架”。说真的，别让我失望。我有记分卡。

什么是 Solid？

它是一个 JavaScript 框架，类似于 React 或 Svelte。它的独特之处在于它打破了传统认知，实现了许多人认为不可能实现的事情。

一个反应式、预编译的无“虚拟 DOM” JSX 框架，具有 React 的所有灵活性和 Svelte 的简单思维模型。

这是一个重视声明式 JavaScript 的显式性和可组合性，同时又贴近底层 DOM 核心的框架。它融合了高级和低级抽象。简而言之，它就是您想要的任何样子。

一些人认为 Solid 代表着未来。

但它也深深扎根于过去，那时的 JavaScript 框架更简单，而且你可以轻松获得真正的 DOM 节点。

当你的 JSX 元素只是真正的 DOM 节点时：

const myButton = <button
  onClick={() => console.log("Hello")}
>Click Me</button>

// myButton instanceof HTMLButtonElement

当你的控制流是运行时 JavaScript 时：

<div>{ showComponent() && <MyComp /> }</div>

// custom end user created component
<Paginated
  list={someList()}
  numberOfItems={25}
>
  {item => <div>{item.description}</div>}
</Paginated>

当您可以按照自己的意愿组合和构建原语时：

function App() {
  const [count, setCount] = createSignal(0);

  // custom primitive with same syntax
  const [state, setState] = createTweenState(0);

  createEffect(() => {
    // no need for that dependency list we know when you update
    const c = count();

    // yep I'm nested
    createEffect(() => {
      document.title = `Weird Sum ${ c + state() }`;
    })
  });

  // Did I mention no stale closures to worry about?
  // Our component only runs once
  const t = setInterval(() => setCount(count() + 1, 5000);
  onCleanup(() => clearInterval(t));

  // other stuff...
}

嗯，你感觉自己像是在作弊。而且不仅仅是在基准测试中😇。鱼与熊掌不可兼得。全面支持 TypeScript。一个很棒的Vite入门模板。使用 JSX，你可以免费获得所有现代工具和 IDE 支持。

为什么你应该感到兴奋

Solid 不仅拥有出色的开发者体验，其功能也十分齐全。

强大的原语

Solid 建立在简单通用的 Reactive 原语之上。Solid 比其他任何框架都更能拥抱这种特性，其渲染器也完全基于你构建应用时使用的原语。毕竟，这真的有什么不同吗？

const el = <div>Initial Text</div>
createEffect(() => {
  el.textContent = getNewText();
});

// versus
render(() => <MyGiantApp />, document.getElementById("app"))

Solid 的每个部分都可扩展，因为每个部分都可以在用户层面进行开发。您可以获得提升效率的高级抽象，但无需放弃它们即可获得 jQuery 鼎盛时期人们所享有的低级功能。

Solid 有一个编译器，但它的存在是为了帮助你，而不是限制你。你可以在任何地方编写行为，并使用相同的原语。它们都使用相同的语法。

Solid 甚至将指令引入了 JSX。

// directive using the same primitives
function accordion(node, isOpen) {
  let initialHeight;
  createEffect(() => {
    if (!initialHeight) {
      initialHeight = `${node.offsetHeight}px`;
    }
    node.style.height = isOpen() ? initialHeight : 0;
  })
}

// use it like this
<div use:accordion={isOpen()}>
  {/* some expandable content */}
</div>

精致商店

由于 Solid 可能永远不会兼容 React，因此与现有的生态系统良好集成非常重要。

商店既带来了一种简单的内部状态管理方法，又为您可能已经熟悉的解决方案（如Redux和XState）带来了 Solid 的精确更新。

Stores 使用嵌套代理，并对不可变数据启用 diff 处理，这样你更新一个数据原子时，只会更新视图中的特定部分。无需重新渲染组件，而是直接更新 DOM 元素。

不需要记忆选择器，它可以工作，而且效果很好。

下一代功能

Solid 拥有所有下一代功能。先从并发渲染和过渡开始怎么样？

我们花了两年时间在服务器上开发了 Suspense，并实现了流式服务器端渲染和渐进式数据融合。即使部署到 Cloudflare Worker 上，这个设置也能运行良好。

最佳性能

我本来打算就此作罢，因为大家听腻了。毕竟这消息已经是好几年前的事了。

Solid 是浏览器和服务器端速度最快（通常也是最小）的 JavaScript 框架。关于它的细节，你可以在其他地方找到，我就不赘述了。

但我们最近做了一项调查，似乎我们的用户也对我们的表现感到满意。

谁投了 1 票？你们不止一个人。

下一步

1.0 版本代表着稳定性和对质量的承诺，但还有很多工作要做。我们正在开发Solid Start，这是一个基于Vite的同构 Starter，它内置了所有最佳实践和服务器渲染功能，并能够部署到多个平台。

我们也很高兴能与Astro合作。集成工作已经开始。目前市面上有很多优秀的构建工具，也有很多新的方式可以利用像我们这样的框架。这是一个非常激动人心的时刻。

虽然五年前我独自一人开始做这件事，但现在我已不再孤军奋战。正是通过社区的辛勤工作，我们才有了REPL和无数的第三方库来处理从拖放和动画到渲染 3D 场景的自定义元素等所有功能。

Solid 已在 IDE 工具中得到广泛采用，其中包括在Atom上进行的工作以及作为Glue Codes背后的引擎。此外，它还是 Builder.io 的JSX-Lite的早期采用者（或许也是影响者）。

说实话，要感谢的人太多了。那些来来去去却留下印记的人。从那些在我们最初的 Spectrum 频道里鼓励我的早期用户，到不断壮大的生态系统合作者和核心维护者团队。如果没有人相信，这样的项目就注定会夭折。所以，我向你们致以最深切的谢意。

但我想特别感谢@adamhaile，他是S.js和Surplus.js的创建者，他开发了 Solid 最初使用的核心技术方法。正是他的研究才使这一切成为可能，并为我指明了继续突破界限的方向。

还有很多工作要做。不过，与此同时，请访问我们的网站solidjs.com ，其中包含文档、示例和40 个新教程。欢迎来我们的Discord上和我们打个招呼。开始使用 Solid 从未如此简单。