SolidJS 组件生命周期有哪些钩子？与 React 有什么区别？

SolidJS 组件生命周期与 React 有显著差异：

核心特点：

• 组件函数只执行一次，不会因为 props 变化重新执行
• 使用 onMount 处理组件挂载
• 使用 onCleanup 处理清理逻辑
• 使用 createEffect 处理响应式更新

生命周期钩子：

javascript
function MyComponent(props) {
  // 组件初始化（只执行一次）
  const [count, setCount] = createSignal(0);
  
  // 挂载后执行
  onMount(() => {
    console.log('Component mounted');
  });
  
  // 响应式副作用
  createEffect(() => {
    console.log('Count changed:', count());
  });
  
  // 清理逻辑
  onCleanup(() => {
    console.log('Cleanup');
  });
  
  return <div>{count()}</div>;
}

与 React 对比：

特性	React	SolidJS
组件执行	每次渲染都执行	只执行一次
状态更新	触发重新渲染	细粒度 DOM 更新
useEffect	需要声明依赖数组	自动追踪依赖
组件卸载	useEffect cleanup	onCleanup

最佳实践：

• 将响应式逻辑放在 createEffect 中
• 使用 onMount 处理一次性初始化
• 使用 onCleanup 清理副作用
• 避免在组件函数中直接调用 signal getter