React и TypeScript: Практическое руководство. Быстрый старт

}
}
function App () {
return <Counter />
}
export default App

Рассмотрим код подробней.

Конструктор – это особая функция в React-компонентах, которая выполняется при создании нового экземпляра компонента. Она принимает props в качестве параметра и вызывает базовый конструктор через super (props), чтобы унаследовать функциональность родительского компонента. В конструкторе обычно инициализируют начальное состояние компонента и выполняют другие подготовительные операции.

Однако, в современных версиях React большинство разработчиков предпочитают использовать более современный синтаксис с хуками (useState, useEffect, и т.д.), который обеспечивает более читаемый и функциональный способ управления состоянием и эффектами. Хуки стали стандартом в React и рекомендуются для большинства проектов.

Тем не менее, знание о конструкторе важно, так как в некоторых случаях (например, в классовых компонентах) он может использоваться для настройки компонента или выполнения других специфических операций.

– constructor (props): Мы объявляем конструктор для нашего компонента и передаем ему props (свойства), которые компонент получит от родительского компонента. Таким образом, props содержат информацию о данных, которые компонент может использовать.

– super (props): Эта строка вызывает конструктор родительского класса (класса React.Component). Она необходима, чтобы наш компонент мог правильно наследовать функциональность React и корректно обрабатывать переданные свойства (props).

– this.state = {count: 0};: Здесь мы инициализируем локальное состояние компонента. В данном случае, мы создаем переменную count и устанавливаем ее значение на 0. Состояние – это способ для компонента React хранить и отслеживать изменения данных, которые могут влиять на отображение на веб-странице.

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

В этом примере компонент Counter (счетчик) имеет внутренний state, который используется для отслеживания количества нажатий на кнопку «Увеличить». Метод setState () обновляет состояние компонента, что влечет за собой перерендеринг.

– Ипользование пропсов и стейтов

Пропсы (props) позволяют передавать информацию от одного компонента к другому, что делает взаимодействие между компонентами в React гибким и модульным. С использованием состояния (state), вы можете управлять внутренними данными компонента, такими как значения полей ввода или флаги активации, что позволяет компоненту реагировать на пользовательские действия и динамически изменять свое отображение в соответствии с этими данными. Важно помнить, что props – это данные, которые передаются сверху вниз и не изменяются внутри компонента, в то время как state – это изменяемые данные, управляемые самим компонентом.

Используйте пропсы (props), чтобы передавать данные от родительского компонента к дочернему компоненту.

Используйте стейт (state), чтобы управлять внутренним состоянием компонента, которое может изменяться и влиять на его отображение.

Помните, что props – это неизменяемые, а state – изменяемые данные.

6.5 Заключение

Использование props и state в React является фундаментом для создания динамичных и интерактивных пользовательских интерфейсов. Пропсы позволяют компонентам обмениваться данными и структурировать приложение в виде множества многоразовых и переиспользуемых компонентов. Операция о своевременном обновлении состояния компонента через state является ключевой для создания отзывчивых приложений, которые реагируют на действия пользователя. Умение совмещать работу с props и state открывает широкие возможности для разработки сложных приложений.

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

Глава 7. Методы жизненного цикла компонентов

Методы жизненного цикла компонентов в React предоставляют возможность управлять различными аспектами поведения компонента на разных этапах его существования. В этой главе мы рассмотрим основные методы жизненного цикла компонентов и как их использовать.

7.1 Введение в методы жизненного цикла

Методы жизненного цикла – это специальные функции, предоставляемые React, которые вызываются автоматически на различных этапах развития компонента. Эти методы позволяют встраивать логику и выполнить определенные действия в разные моменты времени, когда компонент создается, обновляется или удаляется. Таким образом, методы жизненного цикла компонента предоставляют разработчикам управление процессами и позволяют выполнять различные задачи в зависимости от текущего состояния компонента. Важно знать, когда и как использовать каждый из этих методов для эффективной работы с React-компонентами.

7.2 Основные методы жизненного цикла

В React компоненты проходят через различные этапы своего жизненного цикла, которые тесно связаны с процессами монтирования (создания и добавления в DOM) и размонтирования (удаления из DOM). Рассмотрим эти этапы подробнее:

Монтирование (Mounting):

– constructor (): Вызывается при создании объекта компонента. Здесь происходит инициализация состояния и привязка методов.

– static getDerivedStateFromProps (): Метод, вызываемый перед render, позволяющий компоненту обновить своё внутреннее состояние на основе изменений в свойствах.

– render (): Отвечает за отображение компонента, возвращая элементы для отображения в интерфейсе.

– componentDidMount (): Вызывается сразу после добавления компонента в DOM. Подходит для выполнения действий, которые требуют наличия компонента в DOM, например, запросов к серверу.

Размонтирование (Unmounting):

– componentWillUnmount (): Вызывается перед удалением компонента из DOM. Здесь происходит очистка ресурсов, таких как отмена запросов или удаление подписок.

Эти этапы жизненного цикла предоставляют точки вставки для кода, который должен выполняться при создании и удалении компонента. Дополнительно, React предоставляет другие важные методы жизненного цикла, такие как componentDidUpdate, который вызывается после обновления компонента и предоставляет возможность реагировать на изменения в props или state.

7.3 Пример использования методов жизненного цикла

Рассмотрим пример использования методов жизненного цикла:

import React, {Component} from ’react’
class Timer extends Component {
constructor (props) {
super (props)
this.state = {seconds: 0}
}
componentDidMount () {
this.intervalId = setInterval (() => {
this.setState ({seconds: this.state.seconds +1})
}, 1000)
}
componentWillUnmount () {
clearInterval(this.intervalId)
}
render () {
return <p> Секунды: {this.state.seconds} </p>
}
}
function App () {
return <Timer />
}
export default App

В этом примере:

– В методе constructor инициализируется начальное состояние компонента.