Компоненты - это строительные блоки любого приложения 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.