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

Сколько видов компонентов в React?

У нас есть 4 различных типа компонентов:

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

2- Базовый компонент - компонент с отслеживанием состояния и жизненным циклом

3- Интерактивный компонент - базовый компонент с интерактивными действиями пользователя.

4- Расширенный компонент - оболочка компонента с действиями и улучшенными стилями.

В этом посте мы сосредоточимся на компоненте с отслеживанием состояния.

Когда мы используем компонент с отслеживанием состояния?

Во-первых, компонент Stateful - это класс React. С этим типом компонентов можно использовать хуки рендеринга, реквизита, состояния, ссылок, контекста и жизненного цикла.

При объявлении компонента класса вам следует расширить класс React PureComponent или Component. Тогда все, что вы вернете из функции рендеринга, будет отображаться на экране.

Вот некоторые атрибуты, которые имеет компонент с отслеживанием состояния:

  • Управляет изменениями состояния с помощью функций
  • Предоставляет данные (например, из HTTP-слоев)
  • Может получать исходные данные через route resolves вместо вызовов сервисного уровня.
  • Имеет живые знания о текущем состоянии
  • Информируется компонентами без состояния, когда что-то нужно изменить
  • Может взаимодействовать с внешними зависимостями (например, с http-слоем)
  • Отображает дочерние компоненты без состояния (или даже с сохранением состояния), возможно, в одной <div> оболочке для содержания макета
  • Содержат действия Redux (например, ngrx / store или ng2redux)

Импорт файлов и модулей:

В первом блоке мы должны импортировать все плагины, например:

импортировать React, {PureComponent} из response;

import {connect} из response-redux;

Во втором блоке мы импортируем наши внутренние файлы, например:

импортировать {ComponentName} из ‘@ modules / components /’;

импортировать {getAction, postAction} из "../../redux/actions";

и, наконец, мы импортируем все наши внутренние файлы css, например:

импортировать стили из ‘./file.scss’;

Введите свойства и состояние с помощью TypeScript:

У нас есть 2 метода простой / чистый:

мы можем сделать такой тип реквизита:

ComponentNameProps = {…}

или второй метод, мы делимся Props в соответствии с источником, например:

type OwnProps = {…} // для всех прямых реквизитов ‹Дата компонента = {…} /›

type StateProps = {…} // для всех данных из mapStateToProps

type DispatchProps = {…} // все функции, используемые в mapDispatchToProps

тип ComponentNameProps = StateProps & DispatchProps & OwnProps;

И если нашему Компоненту нужны данные из response-router-dom (пример: идентификатор элемента в match.params), мы объединяем RouteComponentProps с ComponentNameProps нравиться :

тип ComponentNameProps = StateProps & DispatchProps & OwnProps & RouteComponentProps;

И, наконец, в обоих случаях мы создаем тип состояния

тип ComponentNameState = {};

Порядок жизненного цикла:

it is more readable if we respect this order in our class

Например, если мы используем ComponentDidMount в нашем классе, мы должны писать его непосредственно перед функцией рендеринга.

Спасибо за чтение!

Я всегда открыт для предложений по улучшению объяснений. Я учусь на письме. Так что он далек от совершенства, и я просто выражаю свою точку зрения о том, как написать компонент с отслеживанием состояния в React.