Fluent React

Capitolo 4. La riconciliazione interna

Questo lavoro è stato tradotto utilizzando l'AI. Siamo lieti di ricevere il tuo feedback e i tuoi commenti: [e-mail]

Per essere veramente fluenti con React, dobbiamo capire cosa fanno le sue funzioni. Finora abbiamo compreso JSX e React.createElement. Abbiamo anche compreso il DOM virtuale con un livello di dettaglio apprezzabile. In questo capitolo esploreremo le sue applicazioni pratichein React e capiremo cosa fa ReactDOM.createRoot(element).​ren⁠der(). In particolare, esploreremo come React costruisce il suo DOM virtuale e poi aggiorna il DOM reale attraverso un processo chiamatoriconciliazione .

Capire la riconciliazione

Ricapitolando, il DOM virtuale di React è un modello dello stato dell'interfaccia utente desiderato. React prende questo blueprint e, attraverso un processo chiamatoriconciliazione, lo rende reale in un determinato ambiente host; di solito un browser web, ma anche altri ambienti come shell, piattaforme native come iOS e Android e altro ancora.

Considera il seguente frammento di codice:

import { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <main>
      <div>
        <h1>Hello, world!</h1>
        <span>Count: {count}</span>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    </main>
  );
};

Questo frammento di codice contiene una descrizione dichiarativa di ciò che vogliamo che sia lo stato dell'interfaccia utente: un albero di elementi. Sia i nostri compagni ...