Компоненты
ReactElement, который был рассмотрен в прошлой теме, позволяет создавать элементы, которые встраиваются на веб-страницу. Однако ReactElement плохо подходит для создания комплексной разметки HTML. Объекты ReactElement сложно использовать повторно в других аналогичных ситуациях, сложнее поддерживать.
И для решения этой проблемы в React используются компоненты. Компоненты проще обновлять и использовать повторно.
Компоненты аналогичны функциям JavaScript. Они хранят состояние с помощью свойств и возвращают элементы React, которые затем появляются на веб-странице.
Создание компонентов
Компоненты можно определить различными способами. Первый способ - функциональный. Например:
function Hello() {
return <h1>Привет, Eugene</h1>;
}
Здесь определяется компонент Hello. Название компонентов должно начинаться с заглавной буквы.
Второй способ определения компонентов предполагает использование классов ES6:
class Hello extends React.Component {
render() {
return <h1>Привет, Eugene</h1>;
}
}
Для рендеринга компонента в классе компонента обязательно должен быть определен метод render(), который возвращает создаваемый элемент на JSX.
Также для определения мы можем использовать стрелочные функции (arrow functions):
var Hello =() => {
return (<h1>Привет, Eugene</h1>);
}
В целом все описанные выше способы будут равноценны.
Применение компонентов
Используем выше определенный компонент:
<!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">
function Hello() {
return <h1>Привет, Eugene</h1>;
}
ReactDOM.createRoot(
document.getElementById("app")
)
.render(
<Hello />
);
</script>
</body>
</html>
Если рассмотреть поэтапно, то рендеринг компонента будет происходить следующим образом:
Сначала устанавливаем элемент, в который будет производиться рендеринг, с помощью функции
ReactDOM.createRoot()Для рендеринга компонента
<Hello />вызывается функцияrender()React вызывает компонент Hello
Компонент Hello возвращает элемент
<h1>Привет, Eugene</h1>React DOM обновляет стандартный DOM веб-страницы, чтобы она содержала элемент
<h1>Привет, Eugene</h1>
Здесь важно отметить один момент. Вне зависимости от того, какой способ определения компонента мы используем, между названием класса/функции/стрелочной функции и элементом есть соответствие: класс/функция называется "Hello",
и соответственно для рендеринга компонента применяется элемент <Hello />. При этом учитывается регистр.
Причем можно использовать названия в элементов только в верхнем регистре ("Hello", но НЕ "hello"), поскольку элементы с называниями в нижнем регистре будут рассматриваться Reactом как
валидные html-элементы.
- Глава 1. Введение в React
- Глава 2. Основы React
- Глава 3. Состояние. Управление компонентами-классами
- Глава 4. Хуки. Управление функциональными компонентами
- Глава 5. Маршрутизация
- Глава 6. Flux и Redux
- Глава 7. Дополнительные статьи