Рендериране на елементи

Елементите са най-малките градивни елементи на приложенията правени с React.

Елементът описва това, което искате да видите на екрана:

const element = <h1>Hello, world</h1>;

За разлика от DOM елементите в browser-a, React елементите са обикновени обекти и създаването им не се отразява на производителността. React DOM се грижи за актуализирането на DOM дървото в browser-a, да съответства на React елементите.

Забележка:

Често елементите се бъркат с по-широко познатото понятие “компоненти”. Ще въведем компоненти в следващия раздел. Компонентите са “направени” от елементи и ви препоръчваме да прочетете този раздел преди да продължите напред.

Рендериране на елемент в DOM дървото на browser-a

Нека да кажем, че имате <div> във вашия HTML файл:

<div id="root"></div>

Ние наричаме това “root” DOM node, защото всичко в него ще се управлява от React DOM.

Приложенията, изградени само с React, обикновено имат един root DOM node. Ако интегрирате React в съществуващо приложение, може да имате много изолирани DOM roots.

За да рендерирате React елемент в root DOM node, подайте го на ReactDOM.render():

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

Опитайте примера в CodePen

На страницата ще видите “Hello, world”.

Актуализиране на рендерирания елемент

React елементите са immutable. След като създадете елемент, не можете да променяте неговите деца или атрибути. Елементът е като един кадър от филм: той визуализира потребителския интерфейс в определен момент във времето.

С нашите познания досега единственият начин да обновите потребителския интерфейс е да създадете нов елемент и да го подадем на ReactDOM.render().

Разгледайте този пример на часовник:

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

Опитайте примера в CodePen

Той извиква ReactDOM.render() всяка секунда от setInterval() функцията.

Забележка:

На практика повечето React приложения извикват веднъж ReactDOM.render(). В следващите раздели ще научим как такъв код се капсулира в компоненти имащи състояние.

Препоръчваме ви да не прескачате теми, защото те зависят една от друга.

React обновява само каквото е необходимо

React DOM сравнява елемента и неговите деца с предишния и прилага само DOM актуализациите, необходими за привеждане на DOM дървото в желаното състояние.

Можете да проверите, като инспектирате последния пример с инструментите на браузъра:

DOM инспектор показва подробни актуализации

Въпреки че създаваме елемент, описващ цялото дърво на потребителския интерфейс на всяка итерация, само текстовият node, чието съдържание се е променило, се актуализира от React DOM.

Според нас, трябва да мислите как потребителският интерфейс трябва да изглежда в даден момент, а не как да го промените с времето. Това елиминира голям спектър от грешки.