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

В React 18 рендеринг элементов имеет некоторые изменения по сравнению с предыдущими версиями, особенно при использованииReactDOM.createRootи новых конкурентных возможностей. Ниже приведён подробный пример и объяснение, показывающие, как рендерить элементы в React 18.

Пример

import React from 'react';
import ReactDOM from 'react-dom/client';

// Создайте простой компонент React
function App() {
    return <h1>Привет, React 18!</h1>;
}

// Получить контейнер DOM с id "example" и создать корневой узел React
const root = ReactDOM.createRoot(document.getElementById("example"));

// Отрисовать компонент React в корневом узле DOM
root.render(<App />);

React-элементы — это наименьшие строительные блоки приложений React. Они описывают то, что вы хотите видеть на экране. React-элементы — это неизменяемые объекты; после создания их нельзя изменить.

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

В отличие от элементов DOM браузера, элементы в React на самом деле являются обычными объектами. React DOM гарантирует, что содержимое данных DOM браузера остаётся согласованным с элементами React.

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

Сначала мы добавляемid="example"к<div>:

<div id="example"></div>

Всё содержимое внутри этого div будет управляться React DOM, поэтому мы называем его "корневым" узлом DOM.

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

Чтобы отрисовать элемент React в корневой узел DOM, мы передаём их все в методroot.render(), чтобы отрисовать его на странице:

Пример

//Создайте элемент React const element =<h1>Hello, world!</h1>; //Получить контейнер DOM и создать корневой узел const root = ReactDOM.createRoot(document.getElementById("example")); //Отрисовать элемент React в корневом узле DOM root.render(element);

Попробуйте »

root.renderМетод выполняет рендеринг элемента в корневой узел, созданный ранее, поэтому элемент будет отображаться внутри DOM-элемента с id "example".

Обновление рендеринга элемента

Элементы React неизменяемы. После создания элемента вы не можете изменить его содержимое или атрибуты.

Единственный способ обновить пользовательский интерфейс — создать новый элемент и передать его в метод ReactDOM.render():

Давайте рассмотрим этот пример с таймером:

Пример

const root = ReactDOM.createRoot(document.getElementById("example")); function tick() { const element = ( <div> <h1>Привет,, мир!</h1> <h2>Сейчас{new Date().toLocaleTimeString()}.</h2> </div> ); root.render(element); } setInterval(tick, 1000);

Попробуйте »

В приведённом выше примере ReactDOM.render() вызывается один раз в секунду с помощью метода setInterval().

Мы можем инкапсулировать отображаемую часть; в следующем примере для её представления используется функция:

Пример

function Clock(props) { return ( <div> <h1>Привет,, мир!</h1> <h2>Сейчас{props.date.toLocaleTimeString()}.</h2> </div> ); } function tick() { const root = ReactDOM.createRoot(document.getElementById("example")); root.render( <Clock date={new Date()} /> ); } setInterval(tick, 1);

Попробуйте »

Помимо функций, мы также можем создать класс ES6 React.Component, который инкапсулирует отображаемые элементы. Обратите внимание, что в методе render() нужно использоватьthis.propsвместоprops：

Пример

class Clock extends React.Component { render() { return ( <div> <h1>Привет, мир!</h1> <h2>Сейчас{this.props.date.toLocaleTimeString()}.</h2> </div> ); } } function tick() { const root = ReactDOM.createRoot(document.getElementById("example")); root.render( <Clock date={new Date()} /> ); } setInterval(tick, 1);

Попробуйте »

React обновляет только необходимое

Стоит отметить, что React DOM сначала сравнивает различия в содержимом элементов до и после, и во время рендеринга обновляет только те части, которые изменились.

Другие расширения