Kāda ir galvenā React renderēšanas iezīme?

Galvenā React renderēšanas iezīme ir Virtual DOM izmantošana un saskaņošanas algoritms (Reconciliation), lai efektīvi atjauninātu lietotāja saskarni.

Virtual DOM ir viegls reāla DOM attēlojums atmiņā. React veido Virtual DOM koku, kas attēlo pašreizējo lietotāja saskarnes stāvokli.

Kad komponenta stāvoklis vai props mainās, React izveido jaunu Virtual DOM koku. Tad tas salīdzina šo jauno koku ar iepriekšējo (procesu sauc par "diффing") ar saskaņošanas algoritma palīdzību.

Saskaņošanas algoritms nosaka minimālo izmaiņu kopumu, kas nepieciešams, lai sinhronizētu reālo DOM ar jauno Virtual DOM. Tā vietā, lai pārkrāsotu visu DOM, React atjaunina tikai tās daļas, kas patiešām ir mainījušās.

Šī pieeja ievērojami palielina veiktspēju, samazinot tiešas manipulācijas ar lēno reālo DOM.

Procesa piemērs:

1. Sākotnējais renderēšana: React izveido Virtual DOM un veido reālo DOM.
2. Stāvokļa izmaiņas: Komponents saņem jaunus datus vai props.
3. Jauna Virtual DOM izveide: React izveido jaunu Virtual DOM koku.
4. Diффing: Salīdzinājums starp jauno un iepriekšējo Virtual DOM.
5. Izmaiņu piemērošana: React atjaunina tikai tās mezglus reālajā DOM.

// Stāvokli saturošs komponenta piemērs
function Counter() {
  const [count, setCount] = React.useState(0);

  // Šī funkcija izsauks pārrenderēšanu, mainot stāvokli
  function handleClick() {
    setCount(count + 1);
  }

  return (
    // Noklikšķinot uz pogas, tiks izsaukta handleClick
    <button onClick={handleClick}>
      Nospiedu {count} reizes
    </button>
  );
}

Šajā piemērā, katru reizi, kad tiek noklikšķināts, setCount atjauno stāvokli. React izveido jaunu Virtual DOM ar atjaunināto count vērtību. Saskaņošanas algoritms nosaka, ka ir mainījies tikai teksta mezgls, un to atjaunina tikai reālajā DOM.