Construire un petit React ChSX

Cette série construira un petit framework frontend, fonctionnellement similaire à React, pour illustrer le fonctionnement de React sous le capot. Ce chapitre couvre JSX.

J'utiliserai Bun comme moteur d'exécution. Le nœud peut avoir besoin d'une configuration supplémentaire pour la saisie et la compilation.

Ce tutoriel est basé sur ce tutoriel, mais avec JSX, dactylographié et une approche plus simple à mettre en œuvre. Vous pouvez consulter les notes et le code sur mon dépôt GitHub.

JSX

Maintenant, avant d'aller plus loin, examinons d'abord plusieurs éléments importants de react-jsx.

Si jamais vous avez jeté un œil au code transpilé d'un composant React, vous verrez qu'il ne s'agit que d'un ensemble d'appels de fonctions. JSX n'est qu'un sucre syntaxique pour React.createElement. C'est, par exemple, le code JSX suivant :

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

Sera transpilé vers :

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

React.createElement créera un élément virtuel, qui est un autre mécanisme de base. Pour faire simple, l'élément virtuel est l'élément du DOM virtuel. Un DOM virtuel est quelque chose qui représente le DOM réel. Étant donné qu’opérer sur un DOM virtuel consiste simplement à exploiter des objets js, cela est beaucoup plus rapide que d’opérer sur un DOM réel. Nous parlerons du DOM virtuel dans le prochain chapitre. Mais pour l'instant, savoir que JSX n'est qu'un sucre de syntaxe pour React.createElement suffit.

La fonction React.createElement prend les arguments suivants dans l'ordre,

1. Le nom de balise de l'élément. Certaines balises sont spéciales, comme div, span, h1, etc. On les appelle des éléments intrinsèques. Certaines balises sont des composants définis par l'utilisateur.
2. Les accessoires de l'élément. Il s'agit d'un objet qui contient les propriétés de l'élément. Par exemple, le className de l'élément h1 ci-dessus est Greeting.
3. Les enfants de l'élément. Cela peut être une chaîne ou un élément. Veuillez noter que ce paramètre est représenté par ...children dans la signature de la fonction, ce qui signifie qu'il peut prendre n'importe quel nombre d'arguments.

Cela semble être un travail facile, n'est-ce pas ? Alors faisons-le.

Implémenter JSX

En matière de compilation, nous pouvons spécifier la fonction à utiliser - par défaut, la fonction est React.createElement. Mais nous pouvons utiliser notre propre fonction.

On crée donc un v-dom.ts, de manière à définir en premier l'élément virtuel.

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

Veuillez noter que nous avons un champ clé dans chaque nœud (le nœud est juste un nom pour le texte ou l'élément). C’est pour la réconciliation, dont nous parlerons dans le prochain chapitre. Vous pouvez l'ignorer en toute sécurité pour l'instant.

Nous pouvons maintenant implémenter la fonction createElement. Nous le mettons dans le même fichier.

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
    }
}

Maintenant, nous demandons à notre compilateur d'utiliser cette fonction. Nous pouvons le faire en ajoutant la ligne suivante en haut de notre fichier.

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

Veuillez noter que puisque nous adoptons la norme React, nous devons introduire la définition du type React. Nous pouvons le faire en ajoutant la ligne suivante en haut de notre fichier.

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

Puis dans le tsconfig.json, nous ajoutons la ligne suivante au champ 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

Maintenant, nous pouvons jeter un œil à l'élément virtuel que nous avons créé.

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
    }
}

Vous verrez uniquement notre élément dom virtuel défini basé sur le code JSX.

De plus, nous pouvons également définir un élément fragment - le <>, si vous ne connaissez pas son nom officiel. Nous pouvons le faire en ajoutant la ligne suivante en haut de notre fichier.

Lorsqu'il s'agit d'un fragment, le compilateur amènera la fabrique de fragments configurée à la balise dans la fonction de création d'élément. C'est la même chose que le fonctionnement des composants fonctionnels : le composant fonctionnel amènera la fonction à la balise, ce que nous démontrerons dans le chapitre suivant.

Néanmoins, dans notre implémentation, aucune manipulation complexe n'est nécessaire : il nous suffit de définir une balise spéciale pour le fragment.

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

Options supplémentaires du compilateur,

bun i @types/react

Fondamentalement, fragment est juste un élément spécial avec une balise vide. Lorsqu'il s'agit de créer un fragment, le compilateur récupérera le jsxFragmentFactory et le placera dans le paramètre tag du premier paramètre de createElement. Nous pouvons donc facilement distinguer le fragment des autres éléments.

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

Ce code corrigera le rendement du DOM virtuel. Jusqu'à présent, nous avons implémenté la partie JSX de notre petite réaction.

Note de bas de page

Ugh, c'est l'auteur du chapitre trois. En fait, l’implémentation actuelle de JSX n’est pas parfaite. Nous le corrigerons dans le troisième chapitre. Maintenant, il ne prend pas en charge la syntaxe telle que

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

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

console.log(App());

C'est parce que chaque {} est traité comme un seul enfant, alors que la carte renvoie un tableau. Il aura donc des enfants imbriqués.

De plus, nous n'avions pas encore pris en charge les composants fonctionnels, ce qui figure dans le chapitre suivant.

Vous pouvez simplement suivre celui actuel et le corriger plus tard. Désolé pour le désagrément.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!