Understanding React Elements Once and for All

V JavaScriptu není na funkcích nic záhadného. Definujete jednu:

function multiply(a, b) {
  return a * b
}

A zavoláte ji:

multiply(3, 4)

Definice vs. volání. Jednoduché.

Nyní zvažte React komponentu:

function UserCard() {
  return <section>User</section>
}

A její použití:

<UserCard />

Jak se to přesně nazývá?

Většina odpovědí, které lidé dávají, je technicky nesprávných:

• •Instancování komponenty
• •Vykreslování
• •Vyhodnocování
• •Volání
• •"Používání"

Žádný z těchto popisů nepopisuje, co se skutečně děje.

Abychom pochopili proč, musíme se podívat z větší perspektivy a prozkoumat, jak React zpracovává váš kód, než ho prohlížeč vůbec uvidí.

Prohlížeč nerozumí JSX

JSX není platný JavaScript. Napíšete:

<UserCard />

…ale prohlížeč to nemůže spustit přímo.

Historicky jsme to řešili kompilováním nenativní syntaxe — TypeScript, Elm, CoffeeScript — do čistého JavaScriptu. JSX následuje přesně stejné pravidlo.

Takže do čeho se JSX kompiluje?

Seznamte se s React elementy

React definuje element jako:

Prostý JavaScript objekt, který popisuje, co chcete vidět v UI.

Není to DOM uzel.

Není to instance komponenty.

Je to popis.

Například, element může vypadat takto:

{
  type: "button",
  props: {
    children: "Save",
    disabled: false
  }
}

Což odpovídá tomuto UI:

<button>Save</button>

React ukládá tyto element objekty. Když se element změní, React přesně ví, která část DOMu by se měla aktualizovat.

Funkce jsx z react/jsx-runtime

Podívejme se, do čeho se JSX kompiluje. Zvažte:

<Button disabled={false}>Save</Button>

Toto se stane něčím jako:

import { jsx } from "react/jsx-runtime"

const element = jsx("button", {
  disabled: false,
  children: "Save"
})

Funkce jsx přijímá:

• •Typ (jako "button" nebo komponentní funkce)
• •Props objekt

A vrací React element objekt.

Nic se nevykresluje.

Nic se nemontuje.

Tato funkce pouze vytváří objekt.

Komponenty jsou jen funkce, které vracejí elementy

React komponenty nejsou magické. Jsou to jen funkce:

function Alert({ message }) {
  return <p role="alert">{message}</p>
}

Pokud to přepíšeme bez JSX:

import { jsx } from "react/jsx-runtime"

function Alert({ message }) {
  return jsx("p", {
    role: "alert",
    children: message
  })
}

Znovu: výsledek je React element objekt.

Předávání komponent do jsx

Můžete použít komponenty jako argument typu:

const cardElement = jsx(ProfileCard, {
  name: "Alex Rivera",
  status: "online",
})

Když React vidí, že typ je funkce, zavolá ji a rekurzivně vytvoří celý strom React elementů, dokud vše není popisem UI.

Takto React řeší váš strom komponent do sady element objektů.

JSX je jen lepší syntaxe

Psaní:

<ProfileCard name="Alex" />

je mnohem příjemnější než:

jsx(ProfileCard, { name: "Alex" })

Ale znamenají to samé. JSX je vrstva pohodlí nad React API pro vytváření elementů.

Zpět k velké otázce

Pokud je toto definice funkce:

function multiply(a, b) { ... }

a toto je volání funkce:

multiply(2, 5)

a toto je definice komponenty:

function UserCard() { ... }

pak co je toto?

<UserCard />

Zde je správná odpověď:

Ne vykreslování.

Ne instancování.

Ne volání.

Je to jednoduše JSX syntaxe, která se při kompilaci stane voláním jsx, které vrací React element objekt.

Všechny tyto vytvářejí React elementy:

<Dashboard />

<div className="wrapper">Content</div>
jsx(Avatar, {
  size: "large",
  url: "https://example.com/photo.png"
})

Stejný výstup. Stejný základní mechanismus.

Komponenty nejsou základem. Elementy jsou.

React komponenty jsou funkce.

React elementy jsou objekty, které popisují, co tyto funkce produkují.

React porovnává tyto element objekty, aby pochopil, jak by měl DOM vypadat.

Jakmile si uvědomíte, že React elementy — ne komponenty — jsou základními stavebními kameny React aplikace, vše ostatní začne dávat smysl: převykreslování, rekonsiliace, memoizace a jak React "rozhoduje", co se skutečně změní v UI.