Solid.js 响应式原理与毕设应用

背景

Solid.js 是前端性能冠军。它使用 JSX 语法但组件函数只执行一次——没有虚拟 DOM，通过 Signals 实现真正的细粒度响应式。如果你的毕设需要展示最新技术或者需要极致性能（如数据可视化、实时表格），Solid 是答辩加分的利器。

---

核心概念

组件函数只执行一次

这是 Solid 和 React 最本质的区别：

// React：每次状态变化，整个函数重新执行
function Counter() {
  const [count, setCount] = useState(0);
  console.log('render');  // 每次 count 变化都会打印
  return <div>{count}</div>;
}

// Solid：函数只执行一次
function Counter() {
  const [count, setCount] = createSignal(0);
  console.log('setup');  // 只在初始化时打印一次
  return <div>{count()}</div>;  // count() 是 getter 函数
}

三大响应式原语

// Signal：单个响应式值
const [count, setCount] = createSignal(0);
count();        // 读取
setCount(1);    // 设置

// Effect：副作用
createEffect(() => {
  console.log('count changed:', count());
});

// Memo：派生值（缓存）
const double = createMemo(() => count() * 2);

---

分步操作

第一步：创建项目

npx degit solidjs/templates/js solid-app
cd solid-app
npm install
npm run dev

第二步：理解控制流

Solid 提供特殊的控制流组件：

import { For, Show, Switch, Match } from 'solid-js';

<Show when={user()} fallback={<p>请登录</p>}>
  <p>欢迎, {user().name}</p>
</Show>

<For each={students()}>
  {(student) => <li>{student.name}</li>}
</For>

第三步：数据获取

import { createResource } from 'solid-js';

async function fetchStudents() {
  const res = await fetch('/api/students');
  return res.json();
}

function StudentList() {
  const [students] = createResource(fetchStudents);
  return (
    <Switch>
      <Match when={students.loading}><p>加载中...</p></Match>
      <Match when={students.error}><p>加载失败</p></Match>
      <Match when={students()}>
        <For each={students()}>{(s) => <div>{s.name}</div>}</For>
      </Match>
    </Switch>
  );
}

---

毕设推荐场景

数据可视化大屏

Solid 的细粒度更新确保只有变化的数据点重渲染，比 React 高效得多。

实时协作应用

WebSocket 高频更新场景，Solid 的性能优势明显。

答辩加分项

用 Solid 并在答辩中讲清楚"无虚拟 DOM 的响应式原理"，评委老师会有深刻印象。

---

思考题

1. 为什么 Solid 组件函数只执行一次？它如何在状态变化时更新 DOM？
2. Signal 返回的是 getter 函数而非值本身，这样设计的原因是什么？
3. 对比 React 的 useMemo 和 Solid 的 createMemo，使用场景有何异同？

---

小结

Solid.js 代表了前端框架的新范式——编译时响应式 + 无虚拟 DOM。虽然生态不如 React，但毕设项目规模适中，用 Solid 不仅性能更优，技术话题性也更强。