核心特性

import { createSignal } from 'solid-js';

// 创建信号
const [count, setCount] = createSignal(0);

// 读取值（调用函数）
console.log(count()); // 0

// 设置值
setCount(1);
setCount(c => c + 1); // 函数式更新

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

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

// 自动追踪依赖，惰性求值
const fullName = createMemo(() => {
  console.log('Computing...'); // 只在依赖变化时执行
  return `${firstName()} ${lastName()}`;
});

console.log(fullName()); // "John Doe"
console.log(fullName()); // 缓存，不重新计算

setFirstName('Jane');
console.log(fullName()); // "Jane Doe"，重新计算

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

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

// 自动追踪依赖
createEffect(() => {
  console.log(`Count is ${count()}`);
  // 依赖: count
});

// count 变化时自动执行
setCount(1); // "Count is 1"

createEffect(() => {
  const timer = setInterval(() => {
    console.log('Tick');
  }, 1000);
  
  // 返回清理函数
  return () => clearInterval(timer);
});

import { createStore, produce } from 'solid-js/store';

// 创建深层响应式对象
const [store, setStore] = createStore({
  user: {
    name: 'John',
    todos: [
      { id: 1, text: 'Learn Solid', done: false }
    ]
  }
});

// 读取
console.log(store.user.name);

// 更新嵌套属性
setStore('user', 'name', 'Jane');

// 数组操作
setStore('user', 'todos', 0, 'done', true);

// 使用 Immer 风格
setStore(produce(s => {
  s.user.todos.push({ id: 2, text: 'Build app', done: false });
}));

import { createResource, Suspense } from 'solid-js';

// 数据获取函数
const fetchUser = async (id) => {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
};

function UserProfile({ id }) {
  // 创建资源
  const [user] = createResource(() => id(), fetchUser);
  
  return (
    <Suspense fallback={<p>Loading...</p>}>
      {user() && (
        <div>
          <h1>{user().name}</h1>
          <p>{user().email}</p>
        </div>
      )}
    </Suspense>
  );
}

// 源代码
function Counter() {
  const [count, setCount] = createSignal(0);
  return <div>{count()}</div>;
}

// 编译后（简化）
function Counter() {
  const [count, setCount] = createSignal(0);
  const _el$ = document.createElement('div');
  insert(_el$, count);
  return _el$;
}