开发体验超赞的SolidJS2.0来了

SolidJS时间线

SolidJS1.0是在2021年发布的, 距今为止已经有5年的时间, 期间衍生了SolidStart这个SSR项目, 整体开发体验是非常不错的, 建议大家都尝试一下

SolidJS 2026年3月发布了2.0的Beta版本, 这个版本给我们带来了不少能够提升开发体验的特性, 这篇文章针对较为实用的新特性给大家用代码说明

1. 一级异步支持

以前写异步要手动搞loading、error 三个 signal，现在直接合并, 少写了大概 70% 的样板代码

Solid 1.x（需要手动编排）

// 1.x：需要手动处理 loading/error/state
const [data, setData] = createSignal(null);
const [loading, setLoading] = createSignal(true);
const [error, setError] = createSignal(null);

createEffect(async () => {
  setLoading(true);
  try {
    const res = await fetch('/api/data');
    setData(await res.json());
  } catch (err) {
    setError(err);
  } finally {
    setLoading(false);
  }
});

// 模板中需要大量条件判断
return (
  <>
    {loading() && <div>Loading...</div>}
    {error() && <div>Error: {error().message}</div>}
    {data() && <div>{data().value}</div>}
  </>
);

Solid 2.0（直接返回 Promise，框架自动处理挂起）

// 2.0：async 成为一等公民，直接返回 Promise
const data = createMemo(async () => {
  const res = await fetch('/api/data');
  return await res.json();
});

// 模板更简洁，框架自动处理 loading/error
return (
  <Suspense fallback={<div>Loading...</div>}>
    <div>{data().value}</div>
  </Suspense>
);

2. action() + 乐观更新（统一数据流）

把乐观更新、请求成功后的数据合并、失败后的回滚，这三件事统一成一个 action() 来处理，不用自己手动编排流程

Solid 1.x（手动编排乐观更新 + 回滚）

const [list, setList] = createStore({ items: [] });

const addItem = async (newItem) => {
  // 1. 乐观更新
  setList('items', [...list.items, newItem]);
  
  try {
    // 2. 发送请求
    const res = await fetch('/api/items', {
      method: 'POST',
      body: JSON.stringify(newItem)
    });
    const saved = await res.json();
    
    // 3. 用服务器返回值替换
    setList('items', list.items.map(i => 
      i.id === newItem.id ? saved : i
    ));
  } catch (err) {
    // 4. 回滚
    setList('items', list.items.filter(i => i.id !== newItem.id));
  }
};

Solid 2.0（action() + createOptimisticStore 统一流程）

action() 自动帮你监听异步过程。setOptimistic 先改数据让用户立刻看到，请求成功了 action 自动用返回值覆盖乐观数据，请求失败了自动回滚到原来的状态。不用自己写 try/catch 做回滚，也不用手动 map 替换数据，4 步代码压成 1 步

const [store, { mutate, setOptimistic }] = createOptimisticStore({
  items: []
});

const addItem = action(async (newItem) => {
  // 乐观更新自动处理
  setOptimistic('items', [...store.items, newItem]);
  
  const res = await fetch('/api/items', {
    method: 'POST',
    body: JSON.stringify(newItem)
  });
  return await res.json();
  // 成功：自动用返回值更新；失败：自动回滚
});

// 模板中直接使用
<For each={store.items}>{item => <div>{item.name}</div>}</For>

能感觉到SolidJS团队是真的在听开发者抱怨, SolidJS不是在堆功能，而是在减少开发者的实际痛点

5年时间从1.0到2.0Beta，节奏稳，对于一直用SolidJS的人来说，这种更新节奏挺让人安心的, 至少不用担心学了一堆API后面用不上以及