Bina Tiny React ChSX

Siri ini akan membina rangka kerja bahagian hadapan yang kecil, fungsinya serupa dengan React, untuk menggambarkan cara React berfungsi di bawah hud. Bab ini merangkumi JSX.

Saya akan menggunakan Bun sebagai masa jalan. Nod mungkin memerlukan konfigurasi tambahan untuk skrip taip dan penyusunan.

Tutorial ini berdasarkan tutorial ini, tetapi dengan JSX, skrip taip dan pendekatan yang lebih mudah untuk dilaksanakan. Anda boleh menyemak nota dan kod pada repo GitHub saya.

JSX

Sekarang, sebelum kita pergi lebih mendalam, mari kita lihat beberapa elemen penting tindak balas- jsx dahulu.

Jika anda pernah melihat pada kod transpil komponen React, anda akan melihat bahawa ia hanyalah sekumpulan panggilan fungsi. JSX hanyalah gula sintaksis untuk React.createElement. Iaitu, sebagai contoh, kod JSX berikut:

const element = <h1 className="greeting">Hello, world!</h1>;

Akan dipindahkan ke:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement akan mencipta elemen maya, yang merupakan satu lagi mekanisme teras. Secara ringkasnya, elemen maya ialah elemen dalam DOM maya. DOM maya ialah sesuatu yang mewakili DOM sebenar. Memandangkan pengendalian pada DOM maya hanyalah mengendalikan objek js, ia adalah lebih pantas daripada beroperasi pada DOM sebenar. Kita akan bercakap tentang DOM maya dalam bab seterusnya. Tetapi buat masa ini, mengetahui bahawa JSX hanyalah gula sintaks untuk React.createElement sudah memadai.

Fungsi React.createElement mengambil hujah berikut mengikut urutan,

1. Nama tag bagi elemen. Sesetengah teg adalah istimewa, seperti div, span, h1, dll. Ini dipanggil elemen intrinsik. Sesetengah teg ialah komponen yang ditentukan pengguna.
2. Prop elemen. Ini adalah objek yang mengandungi sifat unsur. Contohnya, className bagi elemen h1 di atas ialah salam.
3. Kanak-kanak unsur. Ini boleh menjadi rentetan atau elemen. Sila ambil perhatian bahawa parameter ini diwakili sebagai ...kanak-kanak dalam tandatangan fungsi, yang bermaksud bahawa ia boleh mengambil sebarang bilangan argumen.

Bunyinya kerja mudah, bukan? Jadi mari kita lakukannya.

Laksanakan JSX

Apabila ia datang kepada penyusunan, kita boleh menentukan fungsi untuk digunakan- secara lalai, fungsinya ialah React.createElement. Tetapi kita boleh menggunakan fungsi kita sendiri.

Jadi kami mencipta v-dom.ts, untuk menentukan elemen maya terlebih dahulu.

export type VDomAttributes = { 
    key?: string | number
    [_: string]: string | number | boolean | Function | undefined
}

export interface VDomElement {
  kind: 'element'
  tag: string
  children?: VDomNode[]
  props?: VDomAttributes
  key: string | number | undefined
}

export type VDomNode = 
| string
| VDomElement

Sila ambil perhatian bahawa kami mempunyai medan kunci dalam setiap nod (nod hanyalah nama untuk teks atau elemen). Ini adalah untuk perdamaian, yang akan kita bincangkan dalam bab seterusnya. Anda boleh mengabaikannya dengan selamat buat masa ini.

Kini kita boleh melaksanakan fungsi createElement. Kami meletakkannya dalam fail yang sama.

export function createElement(tag: string, props: VDomAttributes, ...children: VDomNode[]): VDomElement {
  console.log('createElement', tag, props, children)
    return {
        kind: 'element',
        tag,
        children,
        props,
        key: props?.key ?? undefined
    }
}

Kini kami mengarahkan pengkompil kami untuk menggunakan fungsi ini. Kita boleh melakukannya dengan menambahkan baris berikut pada bahagian atas fail kami.

const element = <h1 className="greeting">Hello, world!</h1>;

Sila ambil perhatian bahawa memandangkan kami menggunakan standard tindak balas, kami perlu memperkenalkan definisi jenis React. Kita boleh melakukannya dengan menambahkan baris berikut pada bahagian atas fail kami.

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

Kemudian dalam tsconfig.json, kami menambah baris berikut pada medan compilerOptions.

export type VDomAttributes = { 
    key?: string | number
    [_: string]: string | number | boolean | Function | undefined
}

export interface VDomElement {
  kind: 'element'
  tag: string
  children?: VDomNode[]
  props?: VDomAttributes
  key: string | number | undefined
}

export type VDomNode = 
| string
| VDomElement

Sekarang, kita boleh lihat elemen maya yang kami cipta.

export function createElement(tag: string, props: VDomAttributes, ...children: VDomNode[]): VDomElement {
  console.log('createElement', tag, props, children)
    return {
        kind: 'element',
        tag,
        children,
        props,
        key: props?.key ?? undefined
    }
}

Anda hanya akan melihat elemen dom maya kami yang ditentukan berdasarkan kod JSX.

Selain itu, kami juga boleh mentakrifkan unsur serpihan- <>, jika anda tidak tahu nama rasminya. Kita boleh melakukannya dengan menambahkan baris berikut pada bahagian atas fail kami.

Apabila berurusan dengan serpihan, pengkompil akan membawa kilang serpihan yang dikonfigurasikan ke teg dalam fungsi penciptaan elemen. Ini adalah sama seperti cara komponen berfungsi berfungsi- komponen berfungsi akan membawa fungsi ke teg, yang akan kami tunjukkan dalam bab seterusnya.

Walau bagaimanapun, dalam pelaksanaan kami, tidak perlu pengendalian yang rumit- kami hanya perlu menetapkan tag khas untuk serpihan.

import { createElement as h } from './v-dom'

Pilihan pengkompil tambahan,

bun i @types/react

Pada asasnya, serpihan hanyalah elemen istimewa dengan tag kosong. Apabila ia datang kepada penciptaan serpihan, pengkompil akan mengambil jsxFragmentFactory dan memasukkannya ke dalam parameter teg dalam parameter pertama createElement. Jadi kita boleh dengan mudah membezakan serpihan daripada unsur lain.

"compilerOptions": {
    "jsx": "react",
    "jsxFactory": "createElement",
}

Kod ini akan membetulkan hasil DOM maya. Setakat ini, kami telah melaksanakan bahagian JSX daripada tindak balas kecil kami.

Nota kaki

Ugh, ini adalah pengarang dari bab tiga. Sebenarnya, pelaksanaan JSX semasa tidak sempurna. Kami akan membetulkannya dalam bab ketiga. Kini ia tidak menyokong sintaks seperti,

import { createElement } from "./v-dom";

function App() {
    return <div>
        <h1>a</h1>
        <h2>b</h2>
    </div>
}

console.log(App());

Ini kerana setiap {} dianggap sebagai satu kanak-kanak, manakala peta mengembalikan tatasusunan. Jadi ia akan mempunyai anak bersarang.

Kami juga belum menyokong komponen berfungsi lagi, iaitu dalam bab seterusnya.

Anda hanya boleh mengikuti yang semasa dan membetulkannya kemudian. Maaf atas kesulitan ini.

Atas ialah kandungan terperinci Bina Tiny React ChSX. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!