В следующей главе мы рассмотрим более подробно жизненный цикл компонентов и то, как использовать состояние пропсы для создания динамических компонентов.
2.2. Props и состояние компонентов
В предыдущей главе мы познакомились с основными концепциями React и научились создавать простые компоненты. Теперь давайте углубимся в детали рассмотрим два фундаментальных понятия, которые позволяют сложные динамические веб-приложения: props состояние компонентов.
Props: передача данных между компонентами
Props (сокращение от "properties") – это способ передачи данных между компонентами. Когда мы создаем компонент, можем передать ему данные из родительского компонента, используя props. Это позволяет нам создавать компоненты, которые могут быть использованы в разных контекстах и с разными данными.
Давайте рассмотрим пример:
```jsx
import React from 'react';
const Header = (props) => {
return (
<h1>{props.title}</h1>
);
};
const App = () => {
return (
<div>
<Header title="Мой блог" />
</div>
);
};
```
В этом примере мы создаем компонент `Header`, который принимает props `title`. Мы затем `App`, использует `Header` и передает ему `title` со значением "Мой блог". Когда рендерим увидим заголовок
Состояние компонентов: управление данными внутри компонента
Состояние компонентов (state) – это способ хранить данные внутри компонента. Когда мы создаем компонент, можем определить его состояние, которое будет использоваться для хранения данных. компонента может быть изменено, и изменение отражено в UI.
Давайте рассмотрим пример:
```jsx
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Счетчик: {count}</p>
<button onClick={() => setCount(count 1)}>Увеличить</button>
</div>
);
};
```
В этом примере мы создаем компонент `Counter`, который использует hook `useState` для создания состояния `count` со значением 0. Мы также функцию `setCount`, которая позволяет изменить состояние. Когда нажимаем кнопку "Увеличить", вызываем `setCount` и увеличиваем значение на 1. Это изменение будет отражено в UI.
Взаимодействие между props и состоянием
Props и состояние компонентов могут взаимодействовать друг с другом. Когда мы передаем props в компонент, можем использовать их для инициализации состояния. Например:
```jsx
import React, { useState } from 'react';
const Counter = (props) => {
const [count, setCount] = useState(props.initialCount);
return (
<div>
<p>Счетчик: {count}</p>
<button onClick={() => setCount(count 1)}>Увеличить</button>
</div>
);
};
const App = () => {
return (
<div>
<Counter