SolidJS
SolidJS · Reactive Javascript Library
JavaScript框架
https://www.youtube.com/watch?v=hw3Bx5vxKl0
宣告式的JavaScript框架
用於建構快速UI,最大程度控制Reactivity
由Ryan Carniato於2018年推出
與React有許多相似之處
Component同樣是JavaScript函式,以JSX回傳UI
但不使用虛擬DOM,而是和Svelte類似使用編譯器
且函式只會執行一次,不會每次有所改變就重新算繪
Tutorials | SolidJS
基礎功能
Signals
createSignal()
import { createSignal } from "solid-js"
const [count, setCount] = createSignal(0)
getter與setter的陣列
count()
可接受函式使用先前的值
setCount(c => c + 1)
可寫在函式外,不同於useState()有限制範圍
可直接在獨立檔案內用於狀態管理
Effects
createEffect()
import { createEffect } from "solid-js"
createEffect(() => { ... })
會自動訂閱其中函式執行時讀取的Signals,並在其改變時執行
會在算繪完成後才執行,如果想提早修改DOM則需使用createRenderEffect
Derived Signals
基於一個Signals的包裝值
const doubleCount = () => count() * 2
Memos
createMemo()
執行函式並儲存結果,直到相依值改變
適合昂貴的操作,例如創建DOM節點時
import { createMemo } from "solid-js"
const fib = createMemo(() => fibonacci(count()))
流程控制
Show
條件式顯示內容
import { Show } from "solid-js"
code:javascript
<Show
when={loggedIn()}
fallback={<button onClick={toggle}>Log in</button>}
<button onClick={toggle}>Log out</button>
</Show>
fallback與else相同,會在when為非truthy值時顯示其內容
For
迭代物件陣列
當陣列改變時,For會改變DOM的值,而非重新創建
import { For } from "solid-js"
code:javascript
<For each={cats()}>{(cat, i) =>
<li>
<a target="_blank" href={https://www.youtube.com/watch?v=${cat.id}}>
{i() + 1}: {cat.name}
</li>
}</For>
Index
在某些情況下可以減少重新算繪的次數
For會使用referential equality比較陣列元素的前一狀態
在JavaScript中,原始型別會以值做比較,For可能會造成不必要的重新算繪
經驗法則是:處理原始型別時,使用Index
Index內會拿到signal,而索引值是固定的
For關注的是陣列中的每筆資料本身,資料位置可能會改變
Index關注的是陣列中的每個索引位置,每個位置的內容可以變動
When array is sorted, why neither <For> or <Index> re-rendered? · solidjs/solid · Discussion #1362
Switch
import { Switch, Match } from "solid-js"
code:javascript
<Switch fallback={<p>{x()} is between 5 and 10</p>}>
<Match when={x() > 10}>
<p>{x()} is greater than 10</p>
</Match>
<Match when={5 > x()}>
<p>{x()} is less than 5</p>
</Match>
</Switch>
Dynamic
根據資料算繪內容
可比多個Show或Switch更簡潔
Portal
插入元素到正常算繪流程外的浮動元素
ErrorBoundary
生命週期
onMount
onCleanup
綁定
事件
樣式
ClassList
Ref
解構
Directives
Props
預設Props
解構Props
子元件
Store
巢狀Reactivity
Store
import { createStore } from "solid-js/store"
const [todos, setTodos] = createStore([])
Mutation
Context
Reactivity
Batch
Untrack
On
非同步
惰性載入元件