Ce este Virtual DOM?

Un cuvânt —„Putem folosi un obiect în javascript pentru a reprezenta o structură DOM.”

Virtual DOM (Virtual Document Object Model) este o reprezentare în memorie bazată pe JavaScript a DOM-ului real al unei pagini web. Acționează ca un intermediar între modelul de date al aplicației și DOM-ul real, permițând aplicației să actualizeze interfața cu utilizatorul în mod eficient și eficient. Virtual DOM reduce numărul de operațiuni DOM necesare pentru actualizarea interfeței cu utilizatorul și îmbunătățește performanța generală a aplicațiilor web reducând la minimum cantitatea de manipulare DOM necesară.

Deci, practic, atunci când scrieți ceva (JSX) de genul acesta:

Creați o mulțime de DOM virtuale.

Cum devine JSX „obiectul” în javascript?

După cum probabil știți, pentru orice cod pe care l-am scris, este doar șablonul șir pentru computer. Și acest șir „JSX” nu poate fi executat de Node sau Browser.

Deci, trebuie să transferăm acele „JSX” în ceva executabil.

Așa funcționează babel.

Babel ne va ajuta să transferăm JSX/TSX pe care l-ați scris în fișierul JS real pe care îl poate executa Node sau browser.

Să încercăm cel mai simplu demo și să ne dăm seama cum funcționează!

Să ne murdărim mâinile!

  1. Creați un folder gol:
mkdir transfer-jsx-demo && cd transfer-jsx-demo

2. Creați fișierul sursă, apelați test.js :

let virtualTree = (
  <div id="root">
    <h1>Hello, Virtual DOM!</h1>
    <p>This is a simple example of using a virtual DOM.</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
);

3. Init mediul NPM:

npm init -y

4. Instalați dependențe Babel:

npm install --save-dev @babel/core @babel/cli @babel/preset-react

5. Creați fișierul de configurare Babel, apelați .babelrc :

{
  "presets": [
    "@babel/preset-react"
  ]
}

6. Fugi Babel și dă-o în cuie!

npx babel test.jsx --out-file test.js

Sperăm că veți vedea rezultatul în fișierul test.js.

let virtualTree = /*#__PURE__*/React.createElement("div", {
  id: "root"
}, /*#__PURE__*/React.createElement("h1", null, "Hello, Virtual DOM!"), /*#__PURE__*/React.createElement("p", null, "This is a simple example of using a virtual DOM."), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Item 1"), /*#__PURE__*/React.createElement("li", null, "Item 2"), /*#__PURE__*/React.createElement("li", null, "Item 3")));

Deocamdată, am învățat deja cum să transferăm coduri JSX în coduri JS pe care le pot executa Node sau browsere.

În articolul următor, voi scrie despre „Construiți un DOM virtual cel mai simplu pas cu pas”.

🌋 Vă rugăm să urmăriți și să aveți o zi bună!