React, популярная библиотека JavaScript для создания пользовательских интерфейсов, призывает разработчиков разбивать свой пользовательский интерфейс на компоненты многократного использования. При работе с React вы можете встретить разные термины для компонентов, например «умные компоненты», «глупые компоненты» или «компоненты представления». В этой статье мы рассмотрим эти концепции и предоставим примеры кода, иллюстрирующие каждый тип компонента.

Умные компоненты.
Умные компоненты, также известные как компоненты контейнера, отвечают за управление состоянием и логикой. Обычно они взаимодействуют с источниками данных, выполняют вызовы API и обрабатывают сложную бизнес-логику. Умные компоненты практически не содержат разметки и сосредоточены на управлении поведением приложения. Вот пример:

import React, { Component } from 'react';
class UserProfile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      email: '',
    };
  }
  componentDidMount() {
    // Fetch user data from an API
    // Update component state with fetched data
  }
  render() {
    const { username, email } = this.state;
    return (
      <div>
        <h1>User Profile</h1>
        <p>Username: {username}</p>
        <p>Email: {email}</p>
      </div>
    );
  }
}
export default UserProfile;

Немой (презентационный) компонент.
Немой компонент, также известный как презентационный или функциональный компонент, фокусируется исключительно на рендеринге элементов пользовательского интерфейса на основе реквизитов, которые он получает. У них нет внутреннего состояния или методов жизненного цикла. Глупые компоненты можно использовать повторно, и их часто объединяют для создания сложных структур пользовательского интерфейса. Вот пример:

import React from 'react';
const Button = ({ onClick, label }) => (
  <button onClick={onClick}>{label}</button>
);
export default Button;

В этом примере компонент Button принимает два реквизита, onClick и label, и отображает элемент кнопки. У него нет никаких внутренних методов состояния или жизненного цикла. Отделив рендеринг пользовательского интерфейса от логики, мы можем легко повторно использовать компонент Button в разных частях нашего приложения.

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

Разделяя задачи, вы можете добиться лучшей организации кода, удобства сопровождения и тестирования. Умные компоненты можно тестировать независимо, моделируя необходимые зависимости, а тупые компоненты можно тестировать на предмет результатов рендеринга на основе различных реквизитов.

Компонентная архитектура React позволяет разработчикам создавать сложные пользовательские интерфейсы, разбивая их на более мелкие, многократно используемые компоненты. Понимание различий между умными и глупыми компонентами или компонентами представления имеет решающее значение для создания масштабируемых и удобных в обслуживании приложений React. Умные компоненты управляют логикой и состоянием, в то время как глупые компоненты сосредоточены на рендеринге элементов пользовательского интерфейса на основе полученных реквизитов. Разделив задачи, мы можем добиться возможности повторного использования кода и улучшить общую структуру наших приложений React.