Привет, разработчики! В моем предыдущем блоге мы рассмотрели базовый обзор методов жизненного цикла реакции и их группировку на разных этапах. Прежде чем погрузиться в каждую фазу, рекомендуется иметь базовые знания о процессе жизненного цикла реакции, упомянутом в следующем блоге: https://medium.com/@vishal.jindal9715/lets-dive-into-the-react-js- 487bbe366206
В этом блоге мы расскажем о методах, используемых на фазе монтажа процесса жизненного цикла.
Монтаж
- конструктор
Конструктор компонента реакции — это первый метод, который вызывается в процессе его жизненного цикла. Этот специальный метод вызывается с помощью реквизитов компонента.
Вызов конструктора компонента реакции вызывает конструктор его родительского класса (здесь родительский компонент) и позволяет ему инициализировать свои свойства и локальное состояние, тем самым устанавливая значения по умолчанию. Фрагмент кода конструктора выглядит так:
constructor(props) {
super(props);
this.state = {
myLocalState: true,
myState: this.props.myProps + ‘someStr’;
}
this.myFunc = this.myFunc.bind(this);
}
Вы должны вызвать super и передать реквизиты (как показано выше). В противном случае this.props будет неопределенным в конструкторе, что может привести к ошибкам.
Зачем использовать конструктор
- Настройка локального состояния (значения по умолчанию или на основе получаемых реквизитов).
- Чтобы создать ссылки на элемент или узел реакции.
- Для привязки функций, используемых в самом компоненте.
Вещи, которые нельзя выполнять в конструкторе
- Никогда не вызывайте this.setState в конструкторе.
- Никогда не выполняйте вызов API, componentDidMount всегда предпочтительнее для этого.
- Конструкторы используются только для компонентов на основе классов, никогда не используйте конструктор в функциональном компоненте.
- Избегайте ненужного использования конструктора, если не настроено какое-либо локальное состояние.
2. получить производное состояние из пропса
Этот метод является статическим методом и вызывается на этапе монтирования, а также во время обновления.
При монтировании это последний метод, который вызывается перед отображением DOM пользователю. Этот метод используется с единственной целью, то есть для установки состояния в соответствии с последними реквизитами, которые компонент получил от своего родительского компонента. Фрагмент кода getDerivedStateFromProps выглядит так:
static getDerivedStateFromProps(nextProps, prevState) {
return nextProps.selectedTab === prevState.selectedTab ? {} :
{ selectedTab: nextProps.selectedTab }
}
Таким образом, getDerivedStateFromProps является статической функцией и поэтому не имеет доступа к this — вместо этого вы должны вернуть объект, который будет объединен с будущим состоянием компонента (как показано в коде). .
Хотя мы можем использовать конструктор для настройки локального состояния на основе начальных реквизитов, что является просто вариантом использования настройки состояния на основе реквизитов.
3. componentWillMount (устарело)
Этот метод вызывается только один раз в течение жизненного цикла, непосредственно перед визуализацией компонента, и используется для доступа к свойствам и выполнения некоторой дополнительной логики на их основе.
Это в основном используется для выполнения любых изменений состояния, необходимых перед начальным рендерингом, поскольку вызов this.setState в этом методе не вызовет дополнительный рендеринг.
Этот метод является НЕБЕЗОПАСНЫМ, и его больше не рекомендуется использовать.
4. Рендер
Этот метод является единственным методом, который всегда должен присутствовать в компоненте класса. Рендеринг выполняет здесь всю работу, поскольку возвращает JSX вашего фактического компонента.
render () {
// getting state or props if required...
return (
// JSX code here...
)
}
Метод рендеринга должен быть чистым, то есть он не должен изменять состояние компонента и должен возвращать один и тот же результат при каждом вызове.
5. компонентдидмаунт
Этот метод вызывается сразу после первого жизненного цикла render() или, можно сказать, сразу после монтирования компонента (вставки в дерево). Этот метод является хорошим местом: -
а). Чтобы загрузить данные с удаленной конечной точки.
б). Чтобы создать экземпляр сетевого запроса.
в). Чтобы добавить прослушиватели событий или рисовать на холсте.
componentDidMount() {
// ajax call...
}Избегайте вызова this.setState, так как это приведет к повторному рендерингу.
Исключением из приведенного выше правила является обновление состояния на основе некоторого свойства DOM, которое может быть вычислено только после повторной визуализации компонента (например, положение/размеры некоторых узлов DOM).
Заключение
Спасибо за чтение, ребята. Все это касалось этапа монтажа жизненного цикла компонента. Мы расскажем об этапе обновления и размонтирования в следующем блоге. Приятного чтения!
Ссылки:-
