2. Props и State

React: Props и State - Движок Компонентов

В этом уроке мы разберемся с двумя важнейшими концепциями React: props и state. Они являются ключевыми для построения динамичных и интерактивных компонентов.

Что такое Props?

Props (сокращение от “properties”) - это способ передать данные от родительского компонента к дочернему. Представьте, что это аргументы функции, которые вы передаете при ее вызове. Props предназначены только для чтения. Дочерний компонент не может их изменять напрямую.

Пример:

// Родительский компонент
function App() {
  return (
    <div>
      <Greeting name="Alice" age={30} />
      <Greeting name="Bob" age={25} />
    </div>
  );
}

// Дочерний компонент
function Greeting(props) {
  return (
    <p>Привет, {props.name}! Тебе {props.age} лет.</p>
  );
}

В этом примере компонент App передает данные (имя и возраст) компоненту Greeting через props. Обратите внимание, что props - это объект, содержащий все переданные параметры. props.name и props.age позволяют дочернему компоненту получить доступ к этим значениям.

Что такое State?

State - это данные, которые принадлежат только компоненту и могут изменяться со временем. В отличие от props, state предназначен для управления внутренним состоянием компонента и позволяет React перерисовывать компонент при изменении этих данных.

Для работы со state в функциональных компонентах обычно используется хук useState.

Пример:

import React, { useState } from 'react';

function Counter() {
  // useState возвращает массив: [текущее значение state, функция для обновления state]
  const [count, setCount] = useState(0);

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

  return (
    <div>
      <p>Вы нажали кнопку {count} раз</p>
      <button onClick={increment}>Нажми меня</button>
    </div>
  );
}

В этом примере useState(0) инициализирует state count значением 0. Функция setCount используется для обновления значения count. Когда мы нажимаем на кнопку, вызывается функция increment, которая обновляет state, и React перерисовывает компонент, отображая новое значение count.

Разница между Props и State

Feature	Props	State
Источник данных	Передаются от родительского компонента	Управляются внутри компонента
Изменяемость	Только для чтения (нельзя изменять напрямую)	Могут быть изменены компонентом
Назначение	Передача данных и конфигурация компонента	Управление внутренним состоянием компонента

Жизненный пример

Представьте себе компонент SearchBar на сайте электронной коммерции.

• Props: Родительский компонент может передать props с placeholder текстом для поля поиска (например, placeholder="Поиск товаров").
• State: Компонент SearchBar будет иметь state, который хранит текущий текст, введенный пользователем в поле поиска. При каждом изменении текста в поле поиска, state будет обновляться, и компонент может, например, предлагать варианты поиска.

Другой пример: Компонент BlogPost в блоге.

• Props: Данные о посте (заголовок, контент, автор) передаются через props от родительского компонента, который получает эти данные из базы данных.
• State: Компонент может иметь state для отслеживания, был ли пост “лайкнут” пользователем. При нажатии на кнопку “лайк”, state изменяется, и компонент перерисовывается, отображая увеличенное число лайков.

Ключевые моменты

• Props - для передачи данных от родительских компонентов к дочерним.
• State - для управления внутренним состоянием компонента.
• Props - данные только для чтения.
• State - данные, которые компонент может изменять.
• Используйте useState хук для управления state в функциональных компонентах.
• Изменение state приводит к перерисовке компонента.

Интерактивный пример