⚡ 什么是 SolidJS？

SolidJS 是一个用于构建用户界面的高性能响应式 JavaScript 框架。它使用细粒度响应式系统，无虚拟 DOM，提供接近原生 JavaScript 的性能。

🎯 核心理念

  • 细粒度响应式：精确追踪依赖，只更新变化的部分
  • 无虚拟 DOM：直接操作真实 DOM，更高效
  • Signals 优先：响应式数据的基础单元
  • React 语法：JSX + Hooks 风格，易上手
  • 编译时优化：构建时确定依赖关系

📊 项目信息

⭐

GitHub Stars

30K+ 开发者关注

🚀

性能

比 React 快 2-3 倍

📦

体积

~7KB (gzipped)

💡

Signals

被 React/Angular/Vue 采纳

🚀 简单示例

计数器组件

jsx
import { createSignal } from 'solid-js';
import { render } from 'solid-js/web';

function Counter() {
  const [count, setCount] = createSignal(0);
  
  return (
    <div>
      <p>Count: {count()}</p>
      <button onClick={() => setCount(c => c + 1)}>
        +1
      </button>
    </div>
  );
}

render(() => <Counter />, document.getElementById('app'));

响应式计算

jsx
import { createSignal, createMemo, createEffect } from 'solid-js';

const [firstName, setFirstName] = createSignal('John');
const [lastName, setLastName] = createSignal('Doe');

// 计算属性 - 自动追踪依赖
const fullName = createMemo(() => `${firstName()} ${lastName()}`);

// 副作用 - 依赖变化时自动执行
createEffect(() => {
  console.log('Name changed:', fullName());
});

🔧 核心能力

能力说明
createSignal创建响应式状态
createMemo创建计算属性
createEffect创建副作用
createStore创建深层响应式对象
createResource异步数据加载

🎯 为什么选择 SolidJS？

vs React

对比项SolidJSReact
渲染方式真实 DOM虚拟 DOM
更新粒度细粒度（精确到值）组件级
性能更快 2-3 倍基准
体积~7KB~40KB
学习曲线低（类似 React）基准

📖 更多文档