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

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

import React from ’react’
function Welcome (props) {
  return

Привет, {props.name}!

}
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 (
     
       

Счетчик: {this.state.count} 

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

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

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

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

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

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