🔧 开发问题

Q: 为什么 Signal 值不更新？

A: 检查是否正确调用 Signal：

jsx
// ❌ 错误 - 不会建立依赖
const value = count;
<p>{value}</p>

// ✅ 正确 - 建立依赖
<p>{count()}</p>

Q: Effect 不执行？

A: 确保在 Effect 中访问了 Signal：

javascript
// ❌ 错误 - 没有依赖
createEffect(() => {
  console.log('No dependency');
});

// ✅ 正确 - 有依赖
createEffect(() => {
  console.log(count()); // 追踪 count
});

Q: 如何处理异步操作？

A: 使用 createResource：

javascript
const [data] = createResource(async () => {
  const res = await fetch('/api/data');
  return res.json();
});

🔄 React 迁移

Q: useState 替代方案？

javascript
// React
const [count, setCount] = useState(0);

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

Q: useEffect 替代方案？

javascript
// React
useEffect(() => {
  console.log(count);
}, [count]);

// SolidJS
createEffect(() => {
  console.log(count());
});

Q: useMemo 替代方案？

javascript
// React
const double = useMemo(() => count * 2, [count]);

// SolidJS
const double = createMemo(() => count() * 2);

⚠️ 常见陷阱

1. 解构 Signal 失去响应性

javascript
// ❌ 错误
const { value } = props;
<p>{value}</p>

// ✅ 正确
<p>{props.value}</p>

2. 条件分支改变依赖

javascript
createEffect(() => {
  if (condition()) {
    console.log(a()); // 条件依赖
  }
});
// condition 变化会改变依赖图

3. 在渲染函数外访问 Signal

javascript
// ❌ 错误 - 没有响应式上下文
const value = count();
console.log(value);

// ✅ 正确 - 在 Effect 中
createEffect(() => {
  console.log(count());
});

🔗 相关资源