Ирина Кириченко "React и TypeScript: Практическое руководство. Быстрый старт"
Это руководство предназначено для тех, кто желает освоить создание веб-приложений, используя такие современные инструменты, как React и TypeScript. Оно предлагает последовательный путь в освоении этих технологий – от начальных концепций до более глубоких аспектов. Независимо от вашего уровня подготовки, предлагаются практические примеры и полезные советы, чтобы сделать ваши знания еще более глубокими и применимыми.
State – это специальный объект внутри компонента, который используется для хранения и отслеживания изменяющихся данных. Стейт позволяет компоненту «запоминать» данные и перерисовывать себя, когда эти данные меняются.
Пример: Если у вас есть компонент «Счетчик», то стейт может содержать текущее значение счетчика. Когда пользователь нажимает на кнопку увеличения счетчика, стейт изменяется, и компонент обновляется, чтобы отобразить новое значение счетчика.
import React, {useState} from ’react’ function Counter () { const [count, setCount] = useState (0)
const increment = () => { setCount (count +1) }
return (
Текущее значение: {count}
) } function App () { return }
export default App
count в данном случае представляет начальное состояние (значение), которое мы указываем в useState, и setCount – это функция, которую мы используем для обновления этого состояния. В нашем случае, increment вызывает setCount, чтобы увеличить значение count.
Итак, обощим:
Пропсы (Props) – это данные, которые вы передаете в компонент извне, как параметры.
Стейт (State) – это данные, которые компонент «запоминает» и использует для отслеживания изменений и перерисовки себя.
6.2 Использование пропсов
Пропсы используются для передачи информации, такой как текст, числа, функции или объекты, от одного компонента к другому. Пропсы делают компоненты в React многоразовыми и настраиваемыми.
Вот основные аспекты работы с пропсами в React:
– Передача данных. Пропсы позволяют родительскому компоненту передавать данные в дочерний компонент. Эти данные могут быть переданы в виде атрибутов (параметров) при использовании компонента в JSX.
– Нестрогое чтение (доступ). Дочерний компонент может получить доступ к пропсам, используя props (для функциональных компонентов) или this.props (для классовых компонентов).
– Пропсы только для чтения. Пропсы являются только для чтения, что означает, что дочерний компонент не может изменять значения пропсов. Они предназначены только для отображения данных.
– Использование по умолчанию. Вы можете предоставить значения по умолчанию для пропсов, которые будут использоваться, если соответствующие пропсы не переданы из родительского компонента.
– Проверка типов (Type Checking). React позволяет проводить проверку типов пропсов с помощью PropTypes (для функциональных компонентов) или propTypes (для классовых компонентов). Это помогает предотвратить ошибки типов во время выполнения.
Пример использования:
import React from ’react’ function Welcome (props) { return
Привет, {props.name}!
} function App () { return } export default App
В этом примере компонент App передает name=«John» в дочерний компонент Welcome через props.
Использование пропсов позволяет создавать компоненты, которые могут быть легко настраиваемыми и переиспользуемыми в различных контекстах
– Использование state
Стейт (state) в React представляет собой объект, который содержит данные, влияющие на отображение компонента, и используется для хранения информации, которая может изменяться со временем и должна быть учтена при перерисовке компонента.
Важные аспекты работы со стейтом в React:
– Локальный для компонента. Стейт обычно является локальным для компонента, что означает, что каждый компонент имеет свой собственный стейт. Это помогает изолировать данные и логику между компонентами.
– Инициализация. Стейт может быть инициализирован в конструкторе компонента при использовании классовых компонентов или с использованием хука useState в функциональных компонентах.
– Изменение стейта. Стейт можно изменять с помощью метода setState (для классовых компонентов) или функции, возвращаемой хуком useState (для функциональных компонентов). При изменении стейта React автоматически перерисовывает компонент.
– Асинхронность. Вы должны быть осторожны при изменении стейта, так как операции по его изменению могут быть асинхронными. React может объединять несколько обновлений стейта для оптимизации производительности.
– Неизменяемость (Immutability). Рекомендуется не изменять стейт напрямую, а создавать новый объект стейта с обновленными данными. Это помогает предотвратить мутацию стейта и упростить отслеживание изменений.
– Прокидывание стейта. Стейт может быть передан дочерним компонентам через пропсы, что позволяет им отображать и использовать данные из него.
Таким образом, state используется для хранения данных, которые могут изменяться и влиять на отображение компонента. Вы можете инициализировать стейт в конструкторе компонента и изменять его с помощью метода setState ().
Конструктор – это особая функция в 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.
