【React->Solidjs】二、React vs SolidJS核心差异对照表 ⚙️

组件模型差异

// React：函数组件反复执行
function ReactComp() {
  const [count] = useState(0)
  console.log('React渲染') // 每次更新都会打印
  return <div>{count}</div>
}

// SolidJS：组件函数只执行一次
function SolidComp() {
  const [count] = createSignal(0)
  console.log('Solid初始化') // 仅首次渲染打印
  return <div>{count()}</div>
}

执行机制：

• React通过重新执行组件函数获取新VNode

• SolidJS在初始化时建立响应式关系图

状态管理对比

// React对象状态更新
setUser(prev => ({ ...prev, age: 26 }))

// SolidJS Store更新
setUser('age', 26) // 支持路径语法

生命周期映射

// React依赖管理
useEffect(() => {
  fetchData(userId)
}, [userId]) // 需手动声明依赖

// SolidJS自动追踪
createEffect(() => {
  fetchData(userId()) // 自动捕获userId信号
})

渲染机制原理

// React虚拟DOM流程
状态变化 → 生成新VNode → DOM Diff → 应用差异

// SolidJS响应式流程
状态变化 → 定位依赖的DOM节点 → 直接更新

性能关键：

• SolidJS编译时提取JSX中的动态部分

• 建立细粒度响应式绑定（类似Svelte的机制）

JSX特殊处理

// React动态子元素
<div>
  {showTip && <Tooltip />}
  {items.map(item => <div key={item.id}>{item.name}</div>)}
</div>

// SolidJS控制流组件
<div>
  <Show when={showTip()}>
    <Tooltip />
  </Show>
  <For each={items()}>{(item) => 
    <div>{item.name}</div>
  }</For>
</div>

强制规范：

• 条件渲染必须使用<Show>组件

• 列表必须使用<For>组件（自动处理key）

• 动态属性需使用函数调用形式：class={getClass()}

🔥 迁移常见错误预警：

1. 误用解构：const { user } = props 会切断响应式链接

2. 错误更新方式：尝试直接修改Signal值 count = 5（应使用setter）

3. 控制流混淆：使用三元表达式导致DOM节点重复创建