Рендеринг элементов

Последнее обновление: 06.11.2022

Мельчайшими блоками приложения React являются элементы. Определение простейшего элемента:

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

По сути элементы в React - это обычные объекты JavaScript, с которыми быстрее работать, чем с обычными элементами на веб-странице.

Для рендеринга элементов в React вначале необходимо определить корневой элемент, в который будет производиться рендеринг. Для этого применяется метод ReactDOM.createRoot(). В него передается элемент веб-страницы, в котором будет производиться рендеринг

const rootNode = document.getElementById("app");    // элемент для рендеринга приложения React
// получаем корневой элемент 
const root = ReactDOM.createRoot(rootNode);

Здесь константа rootNode представляет некоторый элемент html-страницы с id="app". И в данном случае именно в этот элемент будет производиться рендеринг приложения React. Результатом метода ReactDOM.createRoot является объект ReactDOMRoot (в данном случае он представлен константой root), который представляет указатель на структуру данных, которую инфраструктура React использует для отслеживания дерева элементов для рендеринга.

Непосредственно для рендеринга у объекта ReactDOMRoot вызывается метод render(). В этот метод передается компонент, который мы хотим отобразить на веб-странице. Например, рендеринг заголовка.

root.render(
        <h1>Hello React</h1>,  // элемент, который мы хотим создать
     )

Элемент React может иметь только один корневой элемент, в который уже вкладываются все остальные элементы. Например, создадим новый проект. Определим в проекте следующий файл index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
    <div id="app"></div>
      
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        ReactDOM
            .createRoot(
                document.getElementById("app")
            )
            .render(
            <div id="items">
                <h2>Список телефонов</h2>
                <ul>
                    <li>Apple iPhone 12 Pro</li>
                    <li>Samsung Galaxy S20</li>
                    <li>Huawei P40 Pro</li>
                    <li>Google Pixel 5</li>
                </ul>
            </div>,
            )
    </script>
</body>
</html>

В данном случае корневым элементом является <div id="items">, который будет добавляться на веб-страницу в элемент с id=app.

ReactElement и элементы в React

При этом в один элемент DOM можно добавить только один элемент ReactElement, например, добавим еще один элемент на веб-страницу:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
    <div id="header"></div>
    <div id="container"></div>
      
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
	    ReactDOM.createRoot(document.getElementById("header"))
            .render(<h1>Hello React!</h1>);

        ReactDOM.createRoot(document.getElementById("container"))
            .render(
            <div id="items">
                <h2>Список телефонов</h2>
                <ul>
                    <li>Apple iPhone 12 Pro</li>
                    <li>Samsung Galaxy S20</li>
                    <li>Huawei P40 Pro</li>
                    <li>Google Pixel 5</li>
                </ul>
            </div>)
    </script>
</body>
</html>
Рендеринг элементов в React

Обновление элементов

Элементы React являются неизменяемыми (immutable). После создания элемента нельзя изменить его атрибуты или дочерние элементы. И единственный способ изменить интерфейс, определенный в элементе, это создать новый элемент и передать его в функцию ReactDOM.render(). Например:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
    <div id="header"></div>
    <div id="container"></div>
       
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const elem = ReactDOM.createRoot(document.getElementById("header"));
        function tick() {
            elem
            .render(
              <div>
                <h1>Сервис получения времени</h1>
                <h2>Текущее время {new Date().toLocaleTimeString()}.</h2>
              </div>
            );
          }
          setInterval(tick, 1000);
 
        ReactDOM.createRoot(document.getElementById("container"))
            .render(
            <div>
                <h2>Начальное время {new Date().toLocaleTimeString()}.</h2>
              </div>
        );
    </script>
</body>
</html>
ReactElement и рендеринг и обновление элементов в React

В данном случае в элементе с id=header будет отображаться текущее время, однако, чтобы каждую секунду изменялось отображаемое значение, там надо повторно вызывать функцию для элемента.

При обновлении элемента виртуальный React DOM сравнивает текущее состояние элемента с его предыдущим состоянием и при наличии изменений применяет их к веб-странице и обновляет стандартный DOM. Но обновляться будет не весь пересоздаваемый элемент, а только текстовый узел, который содержит вывод текущего времени, так как только этот узел будет отличаться от предыдущего состояния.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850