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

Пример: Если у вас есть компонент «Счетчик», то стейт может содержать текущее значение счетчика. Когда пользователь нажимает на кнопку увеличения счетчика, стейт изменяется, и компонент обновляется, чтобы отобразить новое значение счетчика.

import React, {useState} from ’react’
function Counter () {
const [count, setCount] = useState (0)

const increment = () => {
setCount (count +1)
}

return (
<div>
<p> Текущее значение: {count} </p>
<button onClick= {increment}> Увеличить </button>
</div>
)
}
function App () {
return <Counter />
}

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 <h1> Привет, {props.name}! </h1>
}
function App () {
return <Welcomename=«John» />
}
export default App

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

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

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

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

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

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

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

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

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

– Неизменяемость (Immutability). Рекомендуется не изменять стейт напрямую, а создавать новый объект стейта с обновленными данными. Это помогает предотвратить мутацию стейта и упростить отслеживание изменений.

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

Таким образом, state используется для хранения данных, которые могут изменяться и влиять на отображение компонента. Вы можете инициализировать стейт в конструкторе компонента и изменять его с помощью метода setState ().

Пример использования:

import React, {Component} from ’react’
class Counter extends Component {
constructor (props) {
super (props)
this.state = {count: 0}
}
incrementCount = () => {
this.setState ({count: this.state.count +1})
}
render () {
return (
<div>
<p> Счетчик: {this.state.count} </p>
<button onClick={this.incrementCount}> Увеличить </button>
</div>
)