Начиная с React v14, был представлен более простой способ определения функциональных компонентов без сохранения состояния. Эти компоненты используют простые функции Javascript. В React 16.6+ вы можете объявлять «чистые» функциональные компоненты через React.memo

Самый простой способ определить компонент без состояния - написать функцию Pure Javascript.

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

Вот почему компоненты React без сохранения состояния так хороши:

Реквизит только для чтения

Независимо от того, объявляете ли вы компонент как функцию или класс, он никогда не должен изменять свои собственные свойства. Рассмотрим следующую функцию:

function sum(a, b) {
  return a + b;
}

Вот антипаттерн

function withdraw(account, amount) {
  account.total -= amount;
}

Класс не требуется

Обычные функции, как правило, предпочтительнее классов ES6, и устранение связанных с классами беспорядков, таких как extends и конструктор в примере выше, является хорошей победой.

Нет, это ключевое слово

Без ключевого слова this весь компонент становится легче понять. Все раздражающие и сбивающие с толку причуды с ключевым словом this в Javascript можно избежать.

Выгрузка классов избавляет от необходимости вызывать bind для передачи контекста this. Учитывая, насколько запутанным thiskeyword Javascript слишком много разработчиков, избежать его - хорошая победа.

Принудительные передовые практики

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

Компоненты без состояния не поддерживают методы состояния или жизненного цикла. Это хорошая вещь. Почему? Потому что защищает от лени. Функциональные компоненты без сохранения состояния программно обеспечивают чистоту компонента. Вы вынуждены поместить управление состоянием туда, где оно предназначено: в компоненты контейнера более высокого уровня.

Легко понять

Когда вы видите функциональный компонент без состояния, вы знаете, что это просто функция, которая принимает реквизиты и выводит HTML. Это чистая функция.

Легко проверить

Поскольку это чистая функция, ваши утверждения очень просты: учитывая эти значения для свойств, я ожидаю, что он вернет эту разметку.

Представление

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

Чтобы рассмотреть недостатки использования компонентов React без отслеживания состояния, перейдите по этой ссылке