1、写法上
声明变量
import { createSignal, type Component, createMemo } from 'solid-js';const [name, setName] = createSignal<string>('');
useState改名成createSignal- 从直接使用
name变为通过方法调用name()
createSignal 用来创建响应式数据，它可以跟踪单个值的变化
添加样式函数
const nameOutlineStyle = createMemo(() => ({border: nameErrorVisible() ? '1px solid red' : ''
}))
<inputclass='input name'type="text"placeholder='Name'style={nameOutlineStyle()}value={name()}onInput={e => setName(e.target.value)}
/>
2、更新速度
-
在
React与Vue中存在一层虚拟DOM（React中叫Fiber树），每当发生更新，虚拟DOM会进行比较（Diff算法），比较的结果会执行不同的DOM操作（增、删、改） -
SolidJS与Svelte在发生更新时，可以直接调用编译好的DOM操作方法，省去了虚拟DOM比较这一步所消耗的时间
)