В чем заключается отличие между пропсами и состоянием в React?

Sobes Copilot

Получайте ответы в реальном времени

Ответ от нейросети

sobes.tech AI

Пропсы (props) и состояние (state) - это два ключевых механизма управления данными в компонентах React.

Пропсы:

Передаются от родительского компонента дочернему.
Являются неизменяемыми (immutable) внутри дочернего компонента.
Позволяют компонентам взаимодействовать между собой.
Определяют внешний вид или поведение компонента на основе входных данных.

Состояние:

Принадлежит конкретному компоненту и управляется им.
Является изменяемым (mutable) внутри компонента.
Представляет данные, которые могут меняться со временем и влиять на рендеринг компонента.
Изменение состояния вызывает перерисовку компонента и его потомков.

Основные отличия можно представить в виде таблицы:

Характеристика	Пропсы	Состояние
Источник	Родительский компонент	Сам компонент
Изменяемость	Неизменяемые	Изменяемое
Управление	Передаются извне	Управляется внутри компонента
Назначение	Отображение данных извне, настройка	Управление внутренним состоянием компонента
Изменение вызывает	Перерисовку при изменении в родительском	Перерисовку при изменении в текущем компоненте

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

// ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const message = "Привет от родителя!";
  return (
    <div>
      <ChildComponent text={message} /> {/* Передача пропса "text" */}
    </div>
  );
}

export default ParentComponent;

// ChildComponent.jsx
import React from 'react';

function ChildComponent(props) {
  return (
    <p>{props.text}</p> {/* Использование пропса "text" */}
  );
}

export default ChildComponent;

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

// Counter.jsx
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Инициализация состояния "count"

  const increment = () => {
    setCount(count + 1); // Изменение состояния
  };

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={increment}>Увеличить</button>
    </div>
  );
}

export default Counter;