snabbdom
Release 3.6.2
Perpustakaan DOM virtual dengan fokus pada kesederhanaan, modularitas, fitur yang kuat dan kinerja.
Berkat BrowserStack untuk menyediakan akses ke alat pengujian lintas-browser yang hebat.
Bahasa Inggris | 简体中文 | Hindi
Dom virtual luar biasa. Ini memungkinkan kami untuk mengekspresikan pandangan aplikasi kami sebagai fungsi dari keadaannya. Tetapi solusi yang ada terlalu membengkak, terlalu lambat, kurang fitur, memiliki API yang bias terhadap OOP, dan/atau kurang fitur yang saya butuhkan.
Snabbdom terdiri dari inti yang sangat sederhana, berkinerja, dan dapat diperluas yang hanya ≈ 200 sloc. Menawarkan arsitektur modular dengan fungsionalitas yang kaya untuk ekstensi melalui modul khusus. Agar inti tetap sederhana, semua fungsi yang tidak penting didelegasikan ke modul.
Anda dapat membentuk snabbdom menjadi apa pun yang Anda inginkan! Pilih, pilih, dan sesuaikan fungsionalitas yang Anda inginkan. Atau Anda bisa menggunakan ekstensi default dan mendapatkan pustaka DOM virtual dengan kinerja tinggi, ukuran kecil, dan semua fitur yang tercantum di bawah ini.
h Fungsi untuk membuat node dom virtual dengan mudah.h import {
init ,
classModule ,
propsModule ,
styleModule ,
eventListenersModule ,
h
} from "snabbdom" ;
const patch = init ( [
// Init patch function with chosen modules
classModule , // makes it easy to toggle classes
propsModule , // for setting properties on DOM elements
styleModule , // handles styling on elements with support for animations
eventListenersModule // attaches event listeners
] ) ;
const container = document . getElementById ( "container" ) ;
const vnode = h (
"div#container.two.classes" ,
{ on : { click : ( ) => console . log ( "div clicked" ) } } ,
[
h ( "span" , { style : { fontWeight : "bold" } } , "This is bold" ) ,
" and this is just normal text" ,
h ( "a" , { props : { href : "/foo" } } , "I'll take you places!" )
]
) ;
// Patch into empty DOM element – this modifies the DOM as a side effect
patch ( container , vnode ) ;
const newVnode = h (
"div#container.two.classes" ,
{ on : { click : ( ) => console . log ( "updated div clicked" ) } } ,
[
h (
"span" ,
{ style : { fontWeight : "normal" , fontStyle : "italic" } } ,
"This is now italic type"
) ,
" and this is still just normal text" ,
h ( "a" , { props : { href : "/bar" } } , "I'll take you places!" )
]
) ;
// Second `patch` invocation
patch ( vnode , newVnode ) ; // Snabbdom efficiently updates the old view to the new state initpatchhfragment (eksperimental)toVNodeinit hookinsertremovedestroyremovedestroyInti dari snabbdom hanya menyediakan fungsionalitas yang paling penting. Ini dirancang untuk sesederhana mungkin sambil tetap cepat dan dapat diperpanjang.
init Inti hanya memperlihatkan satu init fungsi tunggal. init ini mengambil daftar modul dan mengembalikan fungsi patch yang menggunakan set modul yang ditentukan.
import { classModule , styleModule } from "snabbdom" ;
const patch = init ( [ classModule , styleModule ] ) ;patch Fungsi patch yang dikembalikan oleh init mengambil dua argumen. Yang pertama adalah elemen DOM atau VNode yang mewakili tampilan saat ini. Yang kedua adalah vnode yang mewakili tampilan baru yang diperbarui.
Jika elemen DOM dengan orangtua dilewatkan, newVnode akan diubah menjadi simpul DOM, dan elemen yang diteruskan akan digantikan oleh simpul DOM yang dibuat. Jika VNode lama dilewatkan, snabbdom akan secara efisien memodifikasinya agar sesuai dengan deskripsi di VNode baru.
Setiap vnode lama yang lulus harus menjadi vnode yang dihasilkan dari panggilan sebelumnya ke patch . Ini diperlukan karena snabbdom menyimpan informasi di vnode. Ini memungkinkan untuk mengimplementasikan arsitektur yang lebih sederhana dan lebih berkinerja. Ini juga menghindari penciptaan pohon vnode lama baru.
patch ( oldVnode , newVnode ) ; Meskipun tidak ada API secara khusus untuk menghapus pohon vnode dari elemen titik gunung, salah satu cara untuk hampir mencapai ini adalah memberikan komentar vnode sebagai argumen kedua untuk patch , seperti:
patch (
oldVnode ,
h ( "!" , {
hooks : {
post : ( ) => {
/* patch complete */
}
}
} )
) ;Tentu saja, lalu masih ada satu simpul komentar di titik gunung.
h Disarankan agar Anda menggunakan h untuk membuat vnode. Ia menerima tag/pemilih sebagai string, objek data opsional, dan string opsional atau array anak -anak.
import { h } from "snabbdom" ;
const vnode = h ( "div#container" , { style : { color : "#000" } } , [
h ( "h1.primary-title" , "Headline" ) ,
h ( "p" , "A paragraph" )
] ) ;fragment (eksperimental)Perhatian: Fitur ini saat ini eksperimental dan harus dipilih. API -nya dapat diubah tanpa benjolan versi utama.
const patch = init ( modules , undefined , {
experimental : {
fragments : true
}
} ) ;Membuat simpul virtual yang akan dikonversi menjadi fragmen dokumen yang berisi anak -anak yang diberikan.
import { fragment , h } from "snabbdom" ;
const vnode = fragment ( [ "I am" , h ( "span" , [ " a" , " fragment" ] ) ] ) ;toVNodeMengubah simpul DOM menjadi simpul virtual. Terutama bagus untuk menambal di atas konten HTML yang sudah ada sebelumnya yang sudah ada.
import {
init ,
styleModule ,
attributesModule ,
h ,
toVNode
} from "snabbdom" ;
const patch = init ( [
// Initialize a `patch` function with the modules used by `toVNode`
attributesModule // handles attributes from the DOM node
datasetModule , // handles `data-*` attributes from the DOM node
] ) ;
const newVNode = h ( "div" , { style : { color : "#000" } } , [
h ( "h1" , "Headline" ) ,
h ( "p" , "A paragraph" ) ,
h ( "img" , { attrs : { src : "sunrise.png" , alt : "morning sunrise" } } )
] ) ;
patch ( toVNode ( document . querySelector ( ".container" ) ) , newVNode ) ;Pengait adalah cara untuk menghubungkan ke dalam siklus hidup node DOM. Snabbdom menawarkan pilihan kait yang kaya. Pengait digunakan baik oleh modul untuk memperluas snabbdom, dan dalam kode normal untuk mengeksekusi kode sewenang -wenang pada titik yang diinginkan dalam kehidupan simpul virtual.
| Nama | Dipicu kapan | Argumen untuk panggilan balik |
|---|---|---|
pre | Proses tambalan dimulai | tidak ada |
init | VNode telah ditambahkan | vnode |
create | Elemen DOM telah dibuat berdasarkan VNode | emptyVnode, vnode |
insert | sebuah elemen telah dimasukkan ke dalam DOM | vnode |
prepatch | sebuah elemen akan ditambal | oldVnode, vnode |
update | sebuah elemen sedang diperbarui | oldVnode, vnode |
postpatch | sebuah elemen telah ditambal | oldVnode, vnode |
destroy | elemen secara langsung atau tidak langsung dihapus | vnode |
remove | sebuah elemen secara langsung dihapus dari DOM | vnode, removeCallback |
post | Proses patch selesai | tidak ada |
Kait berikut tersedia untuk modul: pre , create , update , destroy , remove , post .
Kait berikut tersedia di properti hook dari elemen individual: init , create , insert , prepatch , update , postpatch , destroy , remove .
Untuk menggunakan kait, lewati mereka sebagai objek untuk hook bidang argumen objek data.
h ( "div.row" , {
key : movie . rank ,
hook : {
insert : ( vnode ) => {
movie . elmHeight = vnode . elm . offsetHeight ;
}
}
} ) ; init hookKait ini dipanggil selama proses patch ketika simpul virtual baru telah ditemukan. Kait dipanggil sebelum snabbdom telah memproses node dengan cara apa pun. Yaitu, sebelum membuat simpul DOM berdasarkan VNode.
insertKait ini dipanggil setelah elemen DOM untuk VNode telah dimasukkan ke dalam dokumen dan sisa siklus patch selesai. Ini berarti bahwa Anda dapat melakukan pengukuran DOM (seperti menggunakan GetBoundingClientRect di kait ini dengan aman, mengetahui bahwa tidak ada elemen yang akan diubah setelah itu yang dapat mempengaruhi posisi elemen yang dimasukkan.
remove Memungkinkan Anda untuk menghubungkan ke penghapusan suatu elemen. Kait dipanggil begitu vnode harus dihapus dari DOM. Fungsi penanganan menerima VNode dan panggilan balik. Anda dapat mengontrol dan menunda penghapusan dengan panggilan balik. Panggilan balik harus dipanggil setelah kait selesai melakukan bisnisnya, dan elemen hanya akan dilepas begitu semua pengait remove telah memohon panggilan balik mereka.
Hook hanya dipicu ketika suatu elemen harus dihapus dari induknya - bukan jika itu adalah anak dari elemen yang dihapus. Untuk itu, lihat hook destroy .
destroyKait ini dipanggil pada simpul virtual ketika elemen DOM -nya dihapus dari DOM atau jika induknya dihapus dari DOM.
Untuk melihat perbedaan antara kait ini dan hook remove , pertimbangkan contoh.
const vnode1 = h ( "div" , [ h ( "div" , [ h ( "span" , "Hello" ) ] ) ] ) ;
const vnode2 = h ( "div" , [ ] ) ;
patch ( container , vnode1 ) ;
patch ( vnode1 , vnode2 ) ; Di sini destroy dipicu untuk elemen div dalam dan elemen span yang dikandungnya. remove , di sisi lain, hanya dipicu pada elemen div karena itu adalah satu -satunya elemen yang dilepas dari induknya.
Anda dapat, misalnya, menggunakan remove untuk memicu animasi ketika suatu elemen sedang dihapus dan menggunakan hook destroy untuk juga menghidupkan hilangnya anak -anak elemen yang dilepas.
Modul bekerja dengan mendaftarkan pendengar global untuk kait. Modul hanyalah nama pengait pemetaan kamus ke fungsi.
const myModule = {
create : ( oldVnode , vnode ) => {
// invoked whenever a new virtual node is created
} ,
update : ( oldVnode , vnode ) => {
// invoked whenever a virtual node is updated
}
} ;Dengan mekanisme ini Anda dapat dengan mudah menambah perilaku snabbdom. Untuk demonstrasi, lihatlah implementasi modul default.
Ini menggambarkan modul inti. Semua modul opsional. Contoh JSX menganggap Anda menggunakan pragma jsx yang disediakan oleh perpustakaan ini.
Modul kelas menyediakan cara mudah untuk secara dinamis beralih kelas pada elemen. Ia mengharapkan objek di properti data class . Objek harus memetakan nama kelas ke boolean yang menunjukkan apakah kelas harus tetap atau tidak pada vnode.
h ( "a" , { class : { active : true , selected : false } } , "Toggle" ) ; Di JSX, Anda dapat menggunakan class seperti ini:
< div class = { { foo : true , bar : true } } />
// Renders as: <div class="foo bar"></div>Memungkinkan Anda untuk mengatur properti pada elemen DOM.
h ( "a" , { props : { href : "/foo" } } , "Go to Foo" ) ; Di JSX, Anda dapat menggunakan props seperti ini:
< input props = { { name : "foo" } } />
// Renders as: <input name="foo" /> with input.name === "foo"Properti hanya dapat diatur. Tidak dihapus. Meskipun browser memungkinkan penambahan dan penghapusan properti khusus, penghapusan tidak akan dicoba oleh modul ini. Ini masuk akal, karena sifat DOM asli tidak dapat dihapus. Dan jika Anda menggunakan properti khusus untuk menyimpan nilai atau merujuk objek pada DOM, maka silakan pertimbangkan untuk menggunakan data-* sebagai gantinya. Mungkin melalui modul dataset.
Sama seperti alat peraga, tetapi atur atribut alih -alih properti pada elemen DOM.
h ( "a" , { attrs : { href : "/foo" } } , "Go to Foo" ) ; Di JSX, Anda dapat menggunakan attrs seperti ini:
< div attrs = { { "aria-label" : "I'm a div" } } />
// Renders as: <div aria-label="I'm a div"></div> Atribut ditambahkan dan diperbarui menggunakan setAttribute . Dalam hal atribut yang telah ditambahkan/diatur sebelumnya dan tidak lagi hadir dalam objek attrs , itu dihapus dari daftar atribut elemen DOM menggunakan removeAttribute .
Dalam kasus atribut boolean (misalnya disabled , hidden , selected ...), artinya tidak tergantung pada nilai atribut ( true atau false ) tetapi malah tergantung pada ada/tidak adanya atribut itu sendiri dalam elemen DOM. Atribut tersebut ditangani secara berbeda oleh modul: jika atribut boolean diatur ke nilai palsu ( 0 , -0 , null , false , NaN , undefined , atau string kosong ( "" )), maka atribut akan dihapus dari daftar atribut elemen DOM.
Memungkinkan Anda untuk mengatur atribut data khusus ( data-* ) pada elemen DOM. Ini kemudian dapat diakses dengan properti htmlelement.dataset.
h ( "button" , { dataset : { action : "reset" } } , "Reset" ) ; Di JSX, Anda dapat menggunakan dataset seperti ini:
< div dataset = { { foo : "bar" } } />
// Renders as: <div data-foo="bar"></div>Modul gaya untuk membuat HTML Anda terlihat licin dan hidup dengan lancar. Pada intinya memungkinkan Anda untuk mengatur properti CSS pada elemen.
h (
"span" ,
{
style : {
border : "1px solid #bada55" ,
color : "#c0ffee" ,
fontWeight : "bold"
}
} ,
"Say my name, and every colour illuminates"
) ; Di JSX, Anda dapat menggunakan style seperti ini:
< div
style = { {
border : "1px solid #bada55" ,
color : "#c0ffee" ,
fontWeight : "bold"
} }
/>
// Renders as: <div style="border: 1px solid #bada55; color: #c0ffee; font-weight: bold"></div> CSS Custom Properties (alias variabel CSS) didukung, mereka harus diawali dengan --
h (
"div" ,
{
style : { "--warnColor" : "yellow" }
} ,
"Warning"
) ; Anda dapat menentukan properti sebagai tertunda. Setiap kali properti ini berubah, perubahan tidak diterapkan sampai setelah frame berikutnya.
h (
"span" ,
{
style : {
opacity : "0" ,
transition : "opacity 1s" ,
delayed : { opacity : "1" }
}
} ,
"Imma fade right in!"
) ;Ini membuatnya mudah untuk secara deklaratif menghidupkan masuknya elemen.
all nilai transition-property tidak didukung.
remove Gaya yang ditetapkan di properti remove akan berlaku setelah elemen akan dihapus dari DOM. Gaya yang diterapkan harus dianimasikan dengan transisi CSS. Hanya sekali semua gaya dilakukan menjiwai elemen akan dihapus dari DOM.
h (
"span" ,
{
style : {
opacity : "1" ,
transition : "opacity 1s" ,
remove : { opacity : "0" }
}
} ,
"It's better to fade out than to burn away"
) ;Ini membuatnya mudah untuk secara deklaratif menghidupkan penghapusan elemen.
all nilai transition-property tidak didukung.
destroy h (
"span" ,
{
style : {
opacity : "1" ,
transition : "opacity 1s" ,
destroy : { opacity : "0" }
}
} ,
"It's better to fade out than to burn away"
) ; all nilai transition-property tidak didukung.
Modul pendengar acara memberikan kemampuan yang kuat untuk melampirkan pendengar acara.
Anda dapat melampirkan fungsi ke suatu acara di vnode dengan memasok objek di on dengan properti yang sesuai dengan nama acara yang ingin Anda dengarkan. Fungsi akan dipanggil ketika peristiwa terjadi dan akan diteruskan ke objek acara yang menjadi miliknya.
function clickHandler ( ev ) {
console . log ( "got clicked" ) ;
}
h ( "div" , { on : { click : clickHandler } } ) ; Di JSX, Anda dapat menggunakan on ini:
< div on = { { click : clickHandler } } />Snabbdom memungkinkan penangan acara bertukar di antara render. Ini terjadi tanpa benar -benar menyentuh penangan acara yang melekat pada DOM.
Namun, perhatikan bahwa Anda harus berhati-hati saat berbagi penangan acara antara vnode , karena teknik yang digunakan modul ini untuk menghindari penangan acara yang mengikat kembali ke DOM. (Dan secara umum, berbagi data antara VNODES tidak dijamin berfungsi, karena modul diizinkan untuk bermutasi data yang diberikan).
Secara khusus, Anda tidak boleh melakukan sesuatu seperti ini:
// Does not work
const sharedHandler = {
change : ( e ) => {
console . log ( "you chose: " + e . target . value ) ;
}
} ;
h ( "div" , [
h ( "input" , {
props : { type : "radio" , name : "test" , value : "0" } ,
on : sharedHandler
} ) ,
h ( "input" , {
props : { type : "radio" , name : "test" , value : "1" } ,
on : sharedHandler
} ) ,
h ( "input" , {
props : { type : "radio" , name : "test" , value : "2" } ,
on : sharedHandler
} )
] ) ; Untuk banyak kasus seperti itu, Anda dapat menggunakan penangan berbasis array sebagai gantinya (dijelaskan di atas). Atau, cukup pastikan setiap node dilewatkan unik on nilai:
// Works
const sharedHandler = ( e ) => {
console . log ( "you chose: " + e . target . value ) ;
} ;
h ( "div" , [
h ( "input" , {
props : { type : "radio" , name : "test" , value : "0" } ,
on : { change : sharedHandler }
} ) ,
h ( "input" , {
props : { type : "radio" , name : "test" , value : "1" } ,
on : { change : sharedHandler }
} ) ,
h ( "input" , {
props : { type : "radio" , name : "test" , value : "2" } ,
on : { change : sharedHandler }
} )
] ) ; SVG hanya berfungsi saat menggunakan fungsi h untuk membuat node virtual. Elemen SVG secara otomatis dibuat dengan ruang nama yang sesuai.
const vnode = h ( "div" , [
h ( "svg" , { attrs : { width : 100 , height : 100 } } , [
h ( "circle" , {
attrs : {
cx : 50 ,
cy : 50 ,
r : 40 ,
stroke : "green" ,
"stroke-width" : 4 ,
fill : "yellow"
}
} )
] )
] ) ;Lihat juga contoh SVG dan contoh korsel SVG.
Browser tertentu (seperti IE <= 11) tidak mendukung properti classList dalam elemen SVG. Karena modul kelas secara internal menggunakan classList , itu tidak akan berfungsi dalam kasus ini kecuali Anda menggunakan ClassList Polyfill. (Jika Anda tidak ingin menggunakan polyfill, Anda dapat menggunakan atribut class dengan modul atribut ).
Fungsi thunk mengambil pemilih, kunci untuk mengidentifikasi thunk, fungsi yang mengembalikan vnode dan jumlah variabel parameter keadaan. Jika dipanggil, fungsi render akan menerima argumen negara.
thunk(selector, key, renderFn, [stateArguments])
renderFn hanya dipanggil jika renderFn diubah atau panjang array [stateArguments] atau elemen -elemennya diubah.
key adalah opsional. Itu harus disediakan ketika selector tidak unik di antara saudara -saudara Thunks. Ini memastikan bahwa Thunk selalu cocok dengan benar saat berbeda.
Thunks adalah strategi optimasi yang dapat digunakan ketika seseorang berurusan dengan data yang tidak dapat diubah.
Pertimbangkan fungsi sederhana untuk membuat node virtual berdasarkan angka.
function numberView ( n ) {
return h ( "div" , "Number is: " + n ) ;
} Tampilan hanya tergantung pada n . Ini berarti bahwa jika n tidak berubah, maka membuat simpul DOM virtual dan menambalnya terhadap vnode lama boros. Untuk menghindari overhead kita dapat menggunakan fungsi helper thunk .
function render ( state ) {
return thunk ( "num" , numberView , [ state . number ] ) ;
} Alih -alih benar -benar memohon fungsi numberView , ini hanya akan menempatkan vnode dummy di pohon virtual. Ketika snabbdom menambah vnode dummy ini dengan vnode sebelumnya, itu akan membandingkan nilai n . Jika n tidak berubah, itu hanya akan menggunakan kembali vnode lama. Ini menghindari menciptakan kembali tampilan angka dan proses yang berbeda sama sekali.
Fungsi tampilan di sini hanya sebuah contoh. Dalam praktiknya, Thunks hanya relevan jika Anda memberikan pandangan rumit yang membutuhkan waktu komputasi yang signifikan untuk menghasilkan.
Perhatikan bahwa fragmen JSX masih eksperimental dan harus dipilih. Lihat bagian fragment untuk detailnya.
Tambahkan opsi berikut ke tsconfig.json Anda:
{
"compilerOptions" : {
"jsx" : " react " ,
"jsxFactory" : " jsx " ,
"jsxFragmentFactory" : " Fragment "
}
} Kemudian pastikan Anda menggunakan ekstensi file .tsx dan mengimpor fungsi jsx dan fungsi Fragment di bagian atas file:
import { Fragment , jsx , VNode } from "snabbdom" ;
const node : VNode = (
< div >
< span > I was created with JSX </ span >
</ div >
) ;
const fragment : VNode = (
< >
< span > JSX fragments </ span >
are experimentally supported
</ >
) ;Tambahkan opsi berikut ke konfigurasi Babel Anda:
{
"plugins" : [
[
" @babel/plugin-transform-react-jsx " ,
{
"pragma" : " jsx " ,
"pragmaFrag" : " Fragment "
}
]
]
} Kemudian impor fungsi jsx dan fungsi Fragment di bagian atas file:
import { Fragment , jsx } from "snabbdom" ;
const node = (
< div >
< span > I was created with JSX </ span >
</ div >
) ;
const fragment = (
< >
< span > JSX fragments </ span >
are experimentally supported
</ >
) ; Properti
Properti sel menentukan elemen HTML dari VNode, secara opsional id -nya diawali oleh # , dan nol atau lebih kelas masing -masing diawali dengan a . . Sintaks terinspirasi oleh pemilih CSS. Berikut beberapa contoh:
div#container.bar.baz - elemen div dengan container ID dan bar kelas dan baz .li - elemen li tanpa id atau kelas.button.alert.primary - Elemen button dengan dua kelas alert dan primary . Pemilih dimaksudkan untuk statis , yaitu, tidak boleh berubah selama masa hidup elemen. Untuk mengatur id dinamis, gunakan modul props dan untuk mengatur kelas dinamis, gunakan modul kelas.
Karena pemilih statis, snabbdom menggunakannya sebagai bagian dari identitas vnode. Misalnya, jika kedua anak itu
[ h ( "div#container.padding" , children1 ) , h ( "div.padding" , children2 ) ] ;ditambal terhadap
[ h ( "div#container.padding" , children2 ) , h ( "div.padding" , children1 ) ] ;Kemudian Snabbdom menggunakan pemilih untuk mengidentifikasi vnode dan menata ulangnya di pohon DOM alih -alih membuat elemen DOM baru. Penggunaan selektor ini menghindari kebutuhan untuk menentukan kunci dalam banyak kasus.
Properti .data dari node virtual adalah tempat untuk menambahkan informasi untuk modul untuk mengakses dan memanipulasi elemen DOM nyata saat dibuat; Tambahkan gaya, kelas CSS, atribut, dll.
Objek data adalah parameter kedua (opsional) ke h()
Misalnya h('div', {props: {className: 'container'}}, [...]) akan menghasilkan node virtual dengan
( {
props : {
className : "container"
}
} ) ; sebagai objek .data -nya.
Properti .children dari simpul virtual adalah parameter ketiga (opsional) untuk h() selama pembuatan. .children hanyalah serangkaian node virtual yang harus ditambahkan sebagai anak -anak dari node orang tua setelah pembuatan.
Misalnya h('div', {}, [ h('h1', {}, 'Hello, World') ]) akan membuat simpul virtual dengan
[
{
sel : "h1" ,
data : { } ,
children : undefined ,
text : "Hello, World" ,
elm : Element ,
key : undefined
}
] ; sebagai properti .children .
Properti .text dibuat ketika simpul virtual dibuat dengan hanya satu anak yang memiliki teks dan hanya membutuhkan document.createTextNode() untuk digunakan.
Misalnya: h('h1', {}, 'Hello') akan membuat simpul virtual dengan Hello sebagai properti .text -nya.
Properti .elm dari node virtual adalah pointer ke simpul dom nyata yang dibuat oleh snabbdom. Properti ini sangat berguna untuk melakukan perhitungan dalam kait serta modul.
Properti .key dibuat ketika kunci disediakan di dalam objek .data Anda. Properti .key digunakan untuk menjaga pointer ke node DOM yang sebelumnya ada untuk menghindari menciptakannya jika tidak perlu. Ini sangat berguna untuk hal -hal seperti pemesanan ulang daftar. Kunci harus berupa string atau angka untuk memungkinkan pencarian yang tepat karena disimpan secara internal sebagai pasangan kunci/nilai di dalam suatu objek, di mana .key adalah kunci dan nilainya adalah properti .elm yang dibuat.
Jika disediakan, properti .key harus unik di antara elemen saudara kandung.
Misalnya: h('div', {key: 1}, []) akan membuat objek node virtual dengan properti .key dengan nilai 1 .
Snabbdom adalah perpustakaan DOM virtual tingkat rendah. Ini tidak teropini terkait dengan bagaimana Anda harus menyusun aplikasi Anda.
Berikut adalah beberapa pendekatan untuk membangun aplikasi dengan snabbdom.
Pastikan untuk membagikannya jika Anda sedang membangun aplikasi dengan cara lain menggunakan Snabbdom.
Paket yang terkait dengan snabbdom harus ditandai dengan kata kunci snabbdom dan diterbitkan di NPM. Mereka dapat ditemukan menggunakan keywords:snabbdom .
Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node':
The node before which the new node is to be inserted is not a child of this node.
Alasan kesalahan ini adalah penggunaan kembali vnode antara tambalan (lihat contoh kode), snabbdom menyimpan node dom aktual di dalam node dom virtual yang diteruskan ke sana sebagai peningkatan kinerja, sehingga menggunakan kembali node antara tambalan tidak didukung.
const sharedNode = h ( "div" , { } , "Selected" ) ;
const vnode1 = h ( "div" , [
h ( "div" , { } , [ "One" ] ) ,
h ( "div" , { } , [ "Two" ] ) ,
h ( "div" , { } , [ sharedNode ] )
] ) ;
const vnode2 = h ( "div" , [
h ( "div" , { } , [ "One" ] ) ,
h ( "div" , { } , [ sharedNode ] ) ,
h ( "div" , { } , [ "Three" ] )
] ) ;
patch ( container , vnode1 ) ;
patch ( vnode1 , vnode2 ) ;Anda dapat memperbaiki masalah ini dengan membuat salinan objek yang dangkal (di sini dengan sintaks penyebaran objek):
const vnode2 = h ( "div" , [
h ( "div" , { } , [ "One" ] ) ,
h ( "div" , { } , [ { ... sharedNode } ] ) ,
h ( "div" , { } , [ "Three" ] )
] ) ;Solusi lain adalah membungkus vnode bersama dalam fungsi pabrik:
const sharedNode = ( ) => h ( "div" , { } , "Selected" ) ;
const vnode1 = h ( "div" , [
h ( "div" , { } , [ "One" ] ) ,
h ( "div" , { } , [ "Two" ] ) ,
h ( "div" , { } , [ sharedNode ( ) ] )
] ) ; Tarik permintaan agar masyarakat mungkin peduli untuk memberikan umpan balik harus digabungkan setelah kesempatan seperti itu disediakan.
