React и TypeScript: Практическое руководство. Быстрый старт. Ирина Кириченко
Чтение книги онлайн.

Читать онлайн книгу React и TypeScript: Практическое руководство. Быстрый старт - Ирина Кириченко страница 14

СКАЧАТЬ 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 <h1> Привет, {props.name}! </h1>

      }

      function App () {

        return <Welcome name=«John» />

      }

      export default App

      В этом примере компонент App передает name=«John» в дочерний компонент Welcome через props.

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

      – Использование state

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

      Важные аспекты работы со стейтом в React:

      – Локальный для компонента. Стейт обычно является локальным для компонента, что означает, что каждый компонент имеет свой собственный стейт. Это помогает изолировать данные и логику между компонентами.

      – Инициализация. Стейт может быть инициализирован в конструкторе компонента при использовании классовых компонентов или с использованием хука useState в функциональных компонентах.

      – Изменение стейта. Стейт СКАЧАТЬ