Содержание
Если вы интересуетесь веб-разработкой, то наверняка слышали, как шумят о React.
React - это библиотека JavaScript с открытым исходным кодом, используемая для создания пользовательских интерфейсов (UI) в веб-приложениях. Она захватила мир веб-разработки.
В этом уроке мы рассмотрим, что такое компоненты React, как передавать им данные и рендерить их с помощью реквизитов, а также как повысить их надежность с помощью реквизитов по умолчанию и propTypes.
Что такое компоненты React?
Представьте, что вы строите цифровой LEGO-шедевр. Каждый отдельный кирпичик LEGO служит своей цели, но только когда они соединяются вместе, получается нечто поистине удивительное.
Аналогичным образом компоненты React похожи на эти кирпичики LEGO. Они представляют собой отдельные строительные блоки, которые собираются вместе, чтобы создать полноценный пользовательский интерфейс. Компонент может быть кнопкой, формой, заголовком или любой другой частью веб-страницы, которую вы только можете придумать.
Думайте о компонентах как о многоразовых шаблонах, которые вы можете разместить в своем веб-приложении, чтобы создать полноценный пользовательский интерфейс.
Почему компоненты важны в React?
Итак, почему компоненты так важны в React? Есть несколько причин:
Модульность и возможность повторного использования
Разбивая пользовательский интерфейс на компоненты, вы создаете модульную структуру. Это означает, что вы можете разрабатывать, тестировать и поддерживать каждую часть вашего приложения отдельно. Кроме того, создав компонент, вы можете повторно использовать его во всем приложении, что сэкономит ваше время и силы.
Эффективность разработки
Компоненты способствуют более эффективному процессу разработки. Разные члены команды могут одновременно работать над разными компонентами, не наступая друг другу на пятки. Это ускоряет процесс разработки и способствует сотрудничеству.
Удобство обслуживания
Представьте, что вам нужно обновить стиль кнопки, которая появляется в нескольких местах вашего приложения. С помощью компонентов вам нужно обновить стиль только в одном месте - в компоненте кнопки, и он автоматически отразится везде, где она используется.
Типы компонентов React
В React существует два основных типа компонентов: функциональные компоненты и компоненты классов.
Как использовать функциональные компоненты
Это самый простой способ определения компонентов в React. По сути, это функции JavaScript, которые принимают props (входные данные) и возвращают JSX (JavaScript Syntax Extension) элементы.
Вот пример кода, который покажет вам, как они работают:
import React from 'react'; // Импортирует библиотеку React.
// Определяем функциональный компонент с именем "Button"
const Button = () => {
return <button>Click Me</button>;
};
export default Button; // Экспортируем компонент Button, чтобы сделать его доступным.
В этом примере мы определили компонент под названием Button с помощью функции JavaScript. Этот компонент возвращает элемент кнопки с текстом “Click Me”.
Как использовать компоненты класса
Это классы JavaScript, которые расширяют класс React.Component. Они используют классы ES6 и предоставляют более продвинутые возможности, такие как управление состоянием и методы жизненного цикла.
Вот пример кода:
import React, { Component } from 'react'; // Создаем React-компоненты на основе классов.
// Компонент класса
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return (
<div>
Счет: {this.state.count}
<button onClick={() => this.setState({ count: this.state.count + 1 })}>Increment</button>.
</div>
);
}
}
export default Counter; // Экспортирует компонент Counter, чтобы сделать его доступным.
В этом примере Counter - это компонент класса, который сохраняет счет в своем состоянии и обновляет его при нажатии на кнопку.
Функциональные компоненты против компонентов класса - когда использовать каждый из них
Глядя на два приведенных выше фрагмента кода, вы можете отличить их по нескольким признакам.
- Синтаксис: функциональные компоненты менее многословны и легче читаются благодаря лаконичному синтаксису. Компоненты классов более многословны из-за структуры класса и необходимости привязывать обработчики событий в конструкторе.
- Состояние: до появления hooks функциональные компоненты не могли хранить State. С помощью хуков вы теперь можете использовать хук useState для управления состоянием в функциональных компонентах. Класс компонента может хранить состояние с помощью свойства
this.state. Обновление состояния осуществляется с помощьюthis.setState(). - Жизненный цикл: функциональные компоненты не имеют методов жизненного цикла. Для достижения аналогичных эффектов можно использовать хуки типа useEffect. Компоненты классов поддерживают различные [методы жизненного цикла] (https://www.freecodecamp.org/news/react-component-lifecycle-methods/), такие как
componentDidMount,componentDidUpdate,componentWillUnmountи так далее. - Производительность: функциональные компоненты работают лучше, поскольку им не требуется дополнительная работа требуется для создания классов. Компонент класса может быть немного медленнее из-за дополнительной работы, необходимой для создания классов.
- Рекомендуемое использование: функциональные компоненты предпочтительны для большинства случаев использования в современной разработке React из-за их простоты и функциональной природы. Компоненты классов по-прежнему актуальны для более сложных сценариев, требующих управления состояниями и методов жизненного цикла (хотя хуки сделали компоненты классов менее необходимыми).
React постоянно развивается, и могут появиться новые паттерны и возможности. Следите за последней документацией по React и лучшими практиками.
Как передавать данные компонентам с помощью реквизитов
Реквизиты (свойства) - это как инструкции, которые вы даете своим компонентам. Они позволяют передавать данные от родительского компонента к дочернему. Таким образом, вы можете настраивать внешний вид и поведение компонентов.
Проще говоря, реквизиты похожи на параметры, которые вы передаете в функцию. С помощью реквизитов можно настраивать содержимое и поведение компонента на основе значений, которые вы передаете при его использовании или рендеринге.
Вот пример кода, который покажет вам, как они работают:
// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
return <ChildComponent name="Cas" />;
};
export default ParentComponent;
// ChildComponent.js
import React from 'react';
const ChildComponent = (props) => {
return Привет, {props.name}!;
};
export default ChildComponent;
В этом примере ParentComponent передает свойство name в ChildComponent, который отображает персонализированное приветствие “Hello, Cas!”.
Как рендерить с реквизитами
Рендеринг с реквизитами позволяет создавать гибкие и интерактивные пользовательские интерфейсы, передавая и настраивая данные внутри ваших компонентов. Получив доступ к данным в дочернем компоненте, вы можете использовать их для рендеринга динамического содержимого в JSX компонента. Это означает, что вы можете отображать различные элементы пользовательского интерфейса в зависимости от значений реквизитов.
В ParentComponent, использованном выше, вы можете передать различные значения реквизиту name, чтобы настроить отображаемое сообщение.
Вот пример кода:
// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
return (
<div>
<ChildComponent name="Cas" />;
<ChildComponent name="Nuel" />;
<ChildComponent name="Abbey" />;
</div>
);
};
export default ParentComponent;
В этом примере для параметра name заданы разные значения. Отображаемые сообщения будут такими:
- `Привет, Кас!
Здравствуйте, Нуэль!- `Привет, Эбби!
Что такое динамический рендеринг?
Рендеринг с использованием реквизитов становится мощным, если сочетать его с выражениями JavaScript. Вы можете использовать реквизиты вместе с другими переменными, функциями или логикой для рендеринга динамического содержимого. Такая гибкость позволяет создавать универсальные и интерактивные пользовательские интерфейсы.
Вот пример кода, который покажет вам, как это работает:
import React from 'react';
const Product = (props) => {
return (
<div>
<h2>{props.name}</h2>
Цена: ${props.price}
{props.isOnSale && В продаже!}
</div>
);
};
export default Product;
В этом примере компонент Product принимает несколько реквизитов для отображения подробной информации о товаре, включая его название, цену и информацию о том, продается ли он.
Выражение {props.isOnSale && On Sale!} условно отображает сообщение ”В продаже!”, если реквизит isOnSale равен true.
Что такое реквизит по умолчанию?
В некоторых случаях вы можете захотеть предоставить значения по умолчанию для реквизитов, если они не были переданы явно. Это гарантирует, что ваш компонент не сломается из-за отсутствия данных.
Вот пример кода:
const ChildComponent = (props) => {
return Привет, {props.name}!;
};
ChildComponent.defaultProps = {
name: 'Guest',
};
В этом примере, если для свойства name не указано значение, используется его значение по умолчанию “Guest”.
Как использовать PropTypes
Чтобы сохранить целостность вашего приложения, вы можете указать ожидаемые типы для ваших реквизитов с помощью propTypes.
Вот пример кода:
import PropTypes from 'prop-types';
ChildComponent.propTypes = {
name: PropTypes.string.isRequired,
};
В этом примере, если для значения свойства не указана строка, будет выдано сообщение об ошибке.
Заключение
Понимание различий между функциональными компонентами и компонентами классов очень важно. Функциональные компоненты, с их более чистым синтаксисом и использованием крючков, предпочтительны для большинства случаев использования. Компоненты классов остаются актуальными для сложных сценариев, требующих управления состояниями и методов жизненного цикла.
Компоненты работают по принципу передачи данных через реквизиты. Реквизиты сродни инструкциям, позволяющим настраивать содержимое и поведение компонентов. Возможность рендеринга с помощью реквизитов позволяет создавать динамичные и персонализированные пользовательские интерфейсы. При использовании в сочетании с выражениями JavaScript реквизиты позволяют создавать универсальные и интерактивные пользовательские интерфейсы.
Реквизиты по умолчанию и PropTypes - это дополнительные инструменты, повышающие надежность компонентов. Реквизиты по умолчанию предоставляют запасные значения для предотвращения сбоев из-за отсутствия данных, а PropTypes обеспечивают проверку типов данных, что повышает целостность приложения.
Поскольку React продолжает развиваться, необходимо постоянно обновлять документацию и лучшие практики. Зная о компонентах, реквизитах, реквизитах по умолчанию и PropTypes, вы можете смело приступать к работе с React.
Хотите узнать больше о React? Книга React for Beginners охватывает практически все аспекты React. Я рекомендую ее для более глубокого понимания.
Если вы нашли это руководство полезным и приятным, пожалуйста, поставьте лайк. Для получения более глубоких уроков следите за обновлениями на X 🙏.
Приятного кодинга!