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 <Welcome name=«John» />
}
export default App
В этом примере компонент App передает name=«John» в дочерний компонент Welcome через props.
Использование пропсов позволяет создавать компоненты, которые могут быть легко настраиваемыми и переиспользуемыми в различных контекстах
– Использование state
Стейт (state) в React представляет собой объект, который содержит данные, влияющие на отображение компонента, и используется для хранения информации, которая может изменяться со временем и должна быть учтена при перерисовке компонента.
Важные аспекты работы со стейтом в React:
– Локальный для компонента. Стейт обычно является локальным для компонента, что означает, что каждый компонент имеет свой собственный стейт. Это помогает изолировать данные и логику между компонентами.
– Инициализация.