Pengenalan kepada Perpustakaan JavaScript Pepejal

Pepejal: Perpustakaan UI JavaScript responsif berprestasi tinggi

Pepejal adalah perpustakaan JavaScript yang responsif untuk mewujudkan antara muka pengguna, yang tidak memerlukan DOM maya. Ia menyusun templat ke dalam nod DOM sebenar dan membungkus kemas kini dalam reaksi halus, jadi apabila keadaan dikemas kini, hanya kod yang relevan akan dijalankan.

Kaedah ini membolehkan pengkompil mengoptimumkan kemas kini rendering dan runtime awal. Fokus pada prestasi ini menjadikannya salah satu kerangka JavaScript yang paling terkenal.

Saya ingin tahu tentang perkara ini dan ingin mencubanya, jadi saya meluangkan sedikit masa untuk membuat aplikasi tugasan kecil untuk meneroka bagaimana rangka kerja ini mengendalikan komponen rendering, mengemas kini keadaan, menyediakan penyimpanan, dan banyak lagi.

Jika anda tidak sabar untuk melihat kod akhir dan hasil, lihat demo akhir: [pautan demo akhir harus dimasukkan di sini, tidak disediakan dalam teks asal]

Permulaan cepat

Seperti kebanyakan kerangka, kita boleh mulakan dengan memasang pakej NPM. Untuk menggunakan rangka kerja dengan JSX, jalankan:

 NPM Pasang Solid-JS Babel-Preset-Solid

Kemudian kita perlu menambah Babel-Preset-Solid ke fail konfigurasi Babel, Webpack atau Rollup kami:

 "Pratetap": ["pepejal"]

Atau, jika anda ingin menyediakan aplikasi kecil, anda juga boleh menggunakan salah satu templat mereka:

 # Buat aplikasi kecil dari templat pepejal npx degit solidjs/templates/js my-app

# Tukar ke CD Direktori Projek My-App

# Pasang kebergantungan npm i # atau benang atau pnpm

# Mulakan pelayan pembangunan NPM Run Dev

Typescript disokong, jika anda ingin memulakan projek TypeScript, tukar arahan pertama ke npx degit solidjs/templates/ts my-app .

Buat dan membuat komponen

Sintaks komponen rendering adalah serupa dengan react.js, jadi ia mungkin kelihatan biasa:

 import {render} dari "pepejal-js/web";

const hellomessage = props =><div> Hello {props.name}</div> ;

membuat (
  () =><hellomessage name="Taylor"></hellomessage> ,
  document.getElementById ("Hello-example")
);

Kita perlu mengimport fungsi render terlebih dahulu, kemudian buat div dengan teks dan prop, dan panggil render, lulus dalam komponen dan elemen kontena.

Kod ini kemudian disusun menjadi ungkapan DOM sebenar. Sebagai contoh, contoh kod di atas, sekali disusun oleh pepejal, kelihatan seperti ini:

 import {render, template, sisipan, createComponent} dari "pepejal-js/web";

const _tmpl $ = template (`<div> Helo</div> `);

const hellomessage = props => {
  const _el $ = _tmpl $ .clonenode (true);
  masukkan (_el $, () => props.name);
  kembali _el $;
};

membuat (
  () => createComponent (Hellomessage, {name: "taylor"}),
  document.getElementById ("Hello-example")
);

Taman permainan pepejal sangat sejuk, ia menunjukkan bahawa pepejal mempunyai kaedah rendering yang berbeza, termasuk klien, pelayan dan klien dengan penghidratan.

Gunakan isyarat untuk mengesan nilai yang berubah

Pepejal menggunakan cangkuk yang dipanggil createSignal , yang mengembalikan dua fungsi: getter dan setter. Ini mungkin kelihatan sedikit pelik jika anda biasa menggunakan kerangka seperti React.js. Anda biasanya mengharapkan elemen pertama menjadi nilai itu sendiri;

Sebagai contoh, jika kita menulis kod berikut:

 const [todos, addTodos] = createSignal ([]);

Rakaman todos tidak mengembalikan nilai, tetapi fungsi. Jika kita mahu menggunakan nilai, kita perlu memanggil fungsi tersebut, seperti todos() .

Untuk senarai tugasan kecil, ini akan:

 import {createSignal} dari "pepejal-js";

const todolist = () => {
  biarkan input;
  const [todos, addTodos] = createSignal ([]);

  const addToDo = value => {
    kembali addTodos ([... todos (), nilai]);
  };

  Kembali (
    <h1>Untuk membuat senarai:</h1>
    <input type="text" ref="{el"> input = el} />
    <button onclick="{()"> addToDo (input.value)}> Tambah item</button>
    

{todos (). MAP (item => (
• {item}
))}

Contoh kod di atas akan memaparkan medan teks, dan selepas mengklik butang "Tambah Projek", todo akan dikemas kini dengan projek baru dan ia akan dipaparkan dalam senarai.

Ini mungkin kelihatan sangat mirip dengan menggunakan useState , jadi apakah perbezaan antara menggunakan getter? Pertimbangkan contoh kod berikut:

 console.log ("Buat isyarat");
const [firstName, setFirstName] = createSignal ("Whitney");
const [lastName, setLastName] = createSignal ("Houston");
const [DisplayFullName, setDisplayFulLName] = createSignal (true);

const displayName = createMemo (() => {
  jika (! DisplayFulLName ()) kembali firstName ();
  kembali `$ {firstName ()} $ {lastName ()}`;
});

createEffect (() => console.log ("nama saya", displayName ()));

console.log ("Set showfullName: false");
setDisplayfulLName (false);

Console.log ("Tukar LastName");
setLastName ("boop");

Console.log ("Set ShowfullName: True");
setDisplayfulLName (benar);

Menjalankan kod di atas akan mendapat:

 <code>Create Signals My name is Whitney Houston Set showFullName: false My name is Whitney Change lastName Set showFullName: true My name is Whitney Boop</code>

Titik utama yang perlu diperhatikan ialah selepas menetapkan nama terakhir baru, "Nama saya ..." tidak direkodkan. Ini kerana tiada apa yang mendengar perubahan pada lastName() pada ketika ini. Nilai baru displayFullName() ditetapkan hanya apabila nilai perubahan displayName() , itulah sebabnya apabila setShowFullName ditetapkan kepada benar, kita dapat melihat bahawa nama terakhir baru dipaparkan.

Ini memberikan kita cara yang lebih selamat untuk mengesan kemas kini nilai.

Primitif responsif

Dalam contoh kod terakhir, saya memperkenalkan createSignal , dan terdapat beberapa primitif lain: createEffect dan createMemo .

createeffect

createEffect menjejaki kebergantungan dan berjalan selepas setiap rendering perubahan ketergantungan.

 // Jangan lupa untuk mengimportnya terlebih dahulu menggunakan 'import {createeffect} dari "pepejal-js";'

createEffect (() => {
  console.log ("Count berada di", kiraan ());
});

Setiap kali nilai count() berubah, "kiraan berada di ..." akan direkodkan

creatememo

createMemo mencipta isyarat baca sahaja yang mengira semula nilainya apabila kebergantungan kod yang dilaksanakan dikemas kini. Ia boleh digunakan apabila anda ingin cache beberapa nilai dan mengaksesnya tanpa menilai semula mereka (sehingga perubahan ketergantungan).

Sebagai contoh, jika kita mahu memaparkan kaunter 100 kali dan mengemas kini nilai apabila butang diklik, menggunakan createMemo akan membolehkan pengiraan semula berlaku hanya sekali setiap klik:

 kaunter fungsi () {
  const [count, setCount] = createSignal (0);
  // ia akan dipanggil 100 kali tanpa membuat pembungkusMemo counter // const counter = () => {
  // kiraan kembali ();
  //}

  // kaunter pembalut dengan creatememo, hanya dipanggil sekali setiap kemas kini // jangan lupa menggunakan 'import {createememo} dari "pepejal-js";'

  Kembali (
    <div>
      <button onclick="{()"> setCount (count () 1)}> count: {count ()}</button>
      <div>1. {Counter ()}</div>
      <div>2. {Counter ()}</div>
      <div>3. {Counter ()}</div>
      <div>4. {Counter ()}</div>
    </div>
  );
}

Kaedah kitaran hayat

Pepejal mendedahkan beberapa kaedah kitaran hayat, seperti onMount , onCleanup , dan onError . Jika kita mahu beberapa kod dijalankan selepas rendering awal, kita perlu menggunakan onMount :

 // Jangan lupa untuk mengimportnya terlebih dahulu menggunakan 'import {onmount} dari "pepejal-js";'
  console.log ("Saya dipasang!");
});

onCleanup adalah serupa dengan componentDidUnmount dalam React - ia berjalan apabila pengiraan semula skop responsif.

onError dilaksanakan apabila ralat berlaku di subscope yang paling terkini. Sebagai contoh, apabila pengambilalihan data gagal, kita boleh menggunakannya.

penyimpanan

Untuk membuat kedai untuk data, pepejal mendedahkan createStore , yang nilai pulangannya adalah objek proksi baca sahaja dan fungsi setter.

Sebagai contoh, jika kita menukar contoh tugas kita untuk menggunakan storan dan bukannya keadaan, ia akan kelihatan seperti ini:

 const [todos, addTodos] = createStore ({list: []});

createEffect (() => {
  console.log (todos.list);
});

onMount (() => {
  addTodos ('senarai', (senarai) => [... senarai, {item: "item todo baru", selesai: false}]);
});

Contoh kod di atas akan mula merakam objek proksi dengan array kosong, dan kemudian merakam objek proksi dengan array yang mengandungi objek {item: "a new todo item", completed: false} .

Harus diingat bahawa jika sifatnya tidak diakses, objek negara peringkat atas tidak dapat dikesan - itulah sebabnya kami log todos.list bukannya todos .

Jika kita hanya merekodkan todos dalam createEffect , kita akan melihat nilai awal senarai, tetapi kita tidak akan melihat nilai yang dikemas kini di onMount .

Untuk menukar nilai di kedai, kami boleh mengemas kini mereka menggunakan fungsi tetapan yang ditakrifkan apabila menggunakan createStore . Sebagai contoh, jika kita ingin mengemas kini item senarai tugasan untuk "selesai", kita boleh mengemas kini storan dengan cara ini:

 const [todos, settodos] = createStore ({
  Senarai: [{Item: "Item Baru", Selesai: False}]
});

const markascomplete = text => {
  settodos (
    "Senarai",
    (i) => i.item === teks,
    "Selesai",
    (c) =>! C.
  );
};

Kembali (
  <button onclick="{()"> markascomplete ("item baru")}> tanda sebagai lengkap</button>
);

Aliran kawalan

Untuk mengelakkan membuang semua nod DOM dicipta setiap kali mereka dikemas kini apabila menggunakan kaedah seperti .map() , pepejal membolehkan kami menggunakan pembantu templat.

Sebahagian daripadanya boleh didapati, seperti For untuk gelung melalui projek, Show untuk menunjukkan dan menyembunyikan unsur -unsur, Switch dan Match untuk memaparkan unsur -unsur yang sepadan dengan keadaan tertentu, dan sebagainya!

Berikut adalah beberapa contoh yang menunjukkan cara menggunakannya:

<for each="{todos.list}" fallback="{<div"> Memuatkan ... }>
  {(item) =><div> {item}</div> }
</for>
<show when="{todos.list[0]?.completed}" fallback="{<div"> Memuatkan ... }>
  <div>Item pertama selesai</div>
</show>
<switch fallback="{<div"> Tiada barang }>
  <match when="{todos.list[0]?.completed}"><completedlist></completedlist></match>
  <match when="{!todos.list[0]?.completed}"><todolist></todolist></match>
</switch>

Projek Demo

Berikut adalah pengenalan cepat kepada asas -asas pepejal. Jika anda ingin mencubanya, saya membuat projek starter yang anda boleh menggunakan secara automatik untuk meniup dan mengklon ke github anda dengan mengklik butang di bawah!

[Butang yang digunakan untuk Netlify hendaklah dimasukkan di sini, tidak disediakan dalam teks asal] Projek ini termasuk tetapan lalai untuk projek pepejal, serta contoh aplikasi tugasan untuk konsep asas yang saya nyatakan dalam siaran ini untuk membantu anda memulakan!

Rangka kerja ini lebih banyak daripada apa yang saya tutupi di sini, jadi jangan ragu untuk menyemak dokumentasi untuk maklumat lanjut!

Atas ialah kandungan terperinci Pengenalan kepada Perpustakaan JavaScript Pepejal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!