Фарқи байни props ва ҳолат дар React чист?

Пропси (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;