Какие знаешь виды React компонентов

1️⃣ Как кратко ответить

В React существуют два основных вида компонентов: функциональные и классовые. Функциональные компоненты определяются как функции и используют хуки для управления состоянием и жизненным циклом. Классовые компоненты определяются как классы и используют методы жизненного цикла и this.state для управления состоянием.

2️⃣ Подробное объяснение темы

В React компоненты являются основными строительными блоками пользовательского интерфейса. Они позволяют разбивать интерфейс на независимые, повторно используемые части. Существует два основных типа компонентов: функциональные и классовые.

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

Функциональные компоненты — это простые JavaScript функции, которые принимают props (свойства) в качестве аргумента и возвращают React элементы. Они являются более простыми и легковесными по сравнению с классовыми компонентами.

Пример функционального компонента:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

• function Greeting(props): Определение функционального компонента, который принимает props как аргумент.
• return <h1>Hello, {props.name}!</h1>;: Возвращает элемент JSX, который будет отображен в DOM. Здесь используется значение props.name для отображения имени.

С появлением хуков в React 16.8 функциональные компоненты получили возможность управлять состоянием и жизненным циклом, что ранее было доступно только классовым компонентам. Например, с помощью хука useState можно управлять состоянием:

import React, { useState } from 'react';
​
function Counter() {
  const [count, setCount] = useState(0);
​
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

• import React, { useState } from 'react';: Импортируем React и хук useState.
• const [count, setCount] = useState(0);: Используем useState для создания состояния count с начальным значением 0.
• onClick={() => setCount(count + 1)}: Обработчик события, который увеличивает значение count на 1 при каждом клике.

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

Классовые компоненты определяются с использованием синтаксиса классов ES6. Они более мощные и сложные, так как поддерживают методы жизненного цикла и имеют доступ к состоянию через this.state.

Пример классового компонента:

import React, { Component } from 'react';
​
class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

• import React, { Component } from 'react';: Импортируем React и базовый класс Component.
• class Greeting extends Component: Определяем классовый компонент, который наследует от Component.
• render(): Метод, который должен возвращать JSX для отображения.

Классовые компоненты используют this.state для управления состоянием и методы жизненного цикла, такие как componentDidMount, componentDidUpdate и componentWillUnmount, для выполнения действий в определенные моменты жизненного цикла компонента.

Применение и выбор

Функциональные компоненты предпочтительны для большинства случаев, так как они проще и легче для понимания. С введением хуков они могут выполнять все те же задачи, что и классовые компоненты, но с меньшим количеством кода. Классовые компоненты все еще могут использоваться, особенно в старых кодовых базах, но их использование постепенно уменьшается в пользу функциональных компонентов.