Как React-компоненты позволяют повторно использовать код

Что такое React-компоненты

function DishCard(props) {
  return (
    <div className="dish-card">
      <h2>{props.name}</h2>
      <p>{props.description}</p>
      <p>Цена: {props.price} ₽</p>
    </div>
  );
}

<DishCard name="Салат Цезарь" description="Свежие листья салата с курицей и сыром" price="450" />
<DishCard name="Тирамису" description="Классический итальянский десерт" price="350" />

Виды React-компонентов

Функциональные компоненты

function Welcome(props) {
  return <h1>Добро пожаловать, {props.name}!</h1>;
}

<Welcome name="Анна" />
<Welcome name="Иван" />

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Создаем состояние: count — текущее значение, setCount — функция для его изменения.

  return (
    <div>
      <p>Вы нажали {count} раз(а).</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

Классовые компоненты React

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 }; // Создаем состояние.
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 }); // Обновляем состояние.
  };

  render() {
    return (
      <div>
        <p>Вы нажали {this.state.count} раз(а).</p>
        <button onClick={this.increment}>Увеличить</button>
      </div>
    );
  }
}

Как отрендерить компоненты

function Welcome() {
  return <h1>Добро пожаловать!</h1>;
}

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

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

function Welcome() {
  return <h1>Добро пожаловать!</h1>;
}

ReactDOM.render(<Welcome />, document.getElementById('root'));

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

function Welcome() {
  return <h1>Добро пожаловать!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Welcome />);

Как создавать композиции из компонентов

function Header() {
  return <h1>Ресторан «Весна»</h1>;
}

function Menu() {
  return (
    <ul>
      <li>Пицца «Маргарита»</li>
      <li>Салат «Цезарь»</li>
      <li>Тирамису</li>
    </ul>
  );
}

function Footer() {
  return <footer>Контакты: +7 (999) 999-99-99</footer>;
}

function App() {
  return (
    <div>
      <Header />
      <Menu />
      <Footer />
    </div>
  );
}

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

function Card(props) {
  return (
    <div className="card">
      <h2>{props.title}</h2>
      <div>{props.children}</div>
    </div>
  );
}

function App() {
  return (
    <div>
      <Card title="Рекомендуемое блюдо">
        <p>Пицца «4 сыра»</p>
        <p>Цена: 500 ₽</p>
      </Card>
      <Card title="Напитки">
        <ul>
          <li>Кофе</li>
          <li>Чай</li>
          <li>Сок</li>
        </ul>
      </Card>
    </div>
  );
}

Как извлечь компоненты

function Comment(props) {
  return (
    <div className="comment">
      <div className="user-info">
        <img src={props.author.avatarUrl} alt={props.author.name} className="avatar" />
        <div className="user-name">{props.author.name}</div>
      </div>
      <div className="comment-text">{props.text}</div>
      <div className="comment-date">{props.date}</div>
    </div>
  );
}

function Avatar(props) {
  return <img src={props.avatarUrl} alt={props.name} className="avatar" />;
}

function UserInfo(props) {
  return (
    <div className="user-info">
      <Avatar avatarUrl={props.user.avatarUrl} name={props.user.name} />
      <div className="user-name">{props.user.name}</div>
    </div>
  );
}

function Comment(props) {
  return (
    <div className="comment">
      <UserInfo user={props.author} />
      <div className="comment-text">{props.text}</div>
      <div className="comment-date">{props.date}</div>
    </div>
  );
}

Зачем нужно повторно использовать код

Как повторное использование кода влияет на разработку

Плюсы и минусы повторного использования кода

• Плюсы 1. Экономия времени и ресурсовПовторно используемые компоненты позволяют сократить время на разработку, избавляя от необходимости каждый раз писать однотипный код.Пример: представьте крупную сеть магазинов, где на сайте каждого региона используются одинаковые компоненты для отображения каталога, корзины и формы оплаты. Разработка и обновление всех этих элементов происходит централизованно. Если нужно изменить процесс оформления заказа, изменения в одном компоненте автоматически обновят все региональные сайты.2. Единообразие интерфейсаИспользование одних и тех же компонентов гарантирует, что все элементы интерфейса выглядят и работают одинаково, улучшая пользовательский опыт.Пример: вы разрабатываете платформу для банка. Каждый элемент — от кнопок до форм — построен на основе повторно используемых компонентов. Это обеспечивает одинаковый пользовательский опыт на всех страницах: клиент знает, как работает интерфейс, независимо от того, открывает ли он страницу платежей или раздел с информацией о кредитах.3. Простота масштабированияКомпоненты можно легко комбинировать и адаптировать для добавления нового функционала, что ускоряет развитие приложения.Пример: приложение для доставки еды. Вы добавляете новый функционал — отзывы клиентов. Вместо разработки всего с нуля вы используете существующие компоненты, которые уже применяются в разделе с описанием блюд.4. Снижение вероятности ошибокЕдиная база компонентов снижает риск появления багов, так как изменение в одном месте обновляет весь интерфейс.Пример: в системе управления проектами одна и та же форма авторизации используется на мобильном приложении и на веб-сайте. Исправив ошибку в одном компоненте, вы автоматически исправляете ее везде, где он используется.

• Минусы 1. Сложности с универсальностью компонентовПопытка сделать компоненты слишком универсальными может привести к перегрузке их логики и затруднить поддержку.Пример: у вас есть компонент для отображения товаров в каталоге. Но для раздела «Распродажа» нужно изменить его стиль, а для нового функционала добавления скидок — переписать часть логики. В итоге универсальный компонент становится слишком перегруженным, и его поддержка усложняется.2. Риск зависимости от старого кодаСтарые компоненты могут не соответствовать текущим требованиям, а их модернизация становится сложной из-за устаревшей архитектуры.Пример: приложение для бронирования авиабилетов. Компонент для отображения расписания рейсов написан несколько лет назад и не учитывает новые требования, например, фильтрацию по времени вылета. Внедрить изменения сложно из-за устаревшей архитектуры, и это тормозит развитие проекта.3. Потенциальные проблемы с тестированиемМногофункциональные компоненты, используемые в разных местах, требуют тщательного тестирования.Пример: обновление компонента корзины в интернет-магазине может вызвать сбои в нескольких других разделах, если не протестировать его поведение во всех контекстах.

Заключение