【React->Solidjs】三、SolidJS核心语法速通 🚀

1. 组件基础

函数组件规范

// React：每次渲染重新执行整个函数
function ReactComp(props) {
  return <div>{props.name}</div>
}

// SolidJS：仅初始化执行一次
function SolidComp(props) {
  return <div>{props.name}</div> // 自动追踪props.name的访问
}

关键规则：

• 组件函数只执行一次，返回的JSX包含响应式闭包

• Props始终为响应式对象，禁止解构

• Children需通过函数调用访问：

// 正确访问children
function Parent() {
  return <Child>{ (name) => <div>{name}</div> }</Child>
}

function Child(props) {
  return <div>{props.children("Solid")}</div>
}

2. 响应式状态系统

原子状态（createSignal）

// 等效React的useState
const [count, setCount] = createSignal(0)

// 读取时调用函数
console.log(count()) // 0

// 更新时：
setCount(5) // 直接赋值
setCount(c => c + 1) // 函数式更新

对象状态（createStore）

// 类似React useReducer + Context的混合体
const [user, setUser] = createStore({
  name: "John",
  profile: { age: 25 }
})

// 嵌套更新（无需展开运算符）
setUser('profile', 'age', 26)

// 响应式访问（自动追踪深层次访问）
createEffect(() => {
  console.log(user.profile.age) // 自动追踪age的变化
})

计算值（createMemo）

// 类似React的useMemo，但自动依赖追踪
const doubleCount = createMemo(() => count() * 2)

// 在JSX中使用
return <div>{doubleCount()}</div>

3. 控制流组件

条件渲染（Show）

// React：三元表达式可能导致DOM重建
{ isLoading ? <Loader /> : <Content /> }

// SolidJS：保持DOM稳定性
<Show when={isLoading()} fallback={<Content />}>
  <Loader />
</Show>

列表渲染（For）

// React需要手动处理key
{ items.map(item => 
  <div key={item.id}>{item.name}</div>
)}

// Solid自动处理key和更新优化
<For each={items()}>{(item) =>
  <div>{item.name}</div>
}</For>

动态属性绑定

// React使用三元表达式
<div className={isActive ? 'active' : ''} />

// SolidJS需要函数包裹
<div class={() => isActive() ? 'active' : ''} />

4. 副作用管理

基础副作用（createEffect）

// React需要手动声明依赖
useEffect(() => {
  document.title = `Count: ${count}`
}, [count])

// Solid自动追踪依赖
createEffect(() => {
  document.title = `Count: ${count()}`
})

生命周期钩子

// 组件挂载时
onMount(() => {
  console.log('Mounted!')
})

// 组件卸载时
onCleanup(() => {
  console.log('Unmounted!')
})

// 组合使用示例
createEffect(() => {
  const timer = setInterval(() => {
    setCount(c => c + 1)
  }, 1000)
  
  onCleanup(() => clearInterval(timer))
})

⚡ 性能最佳实践：

1. 避免过早抽象：小型组件保持在一起，利用响应式细粒度更新

2. 正确使用控制流：用<Show>替代&&短路写法，防止DOM频繁重建

3. Store分层设计：将高频更新状态隔离到独立Store

// 🚫 低效写法
<div>{user().friends?.length > 0 && user().friends[0].name}</div>

// ✅ 高效写法
<div>{user().friends?.[0]?.name}</div> // 自动追踪精确路径