Reactте props жана абалдын айырмасы эмнеде?

Пропс (props) жана статус (state) - React компоненттеринде маалыматтарды башкаруунун эки негизги механизми.

Пропс:

• ата-энеден балдар компонентине өткөрүлөт.
• балдар компонентинин ичинде өзгөрүлбөйт (immutable).
• компоненттердин өз ара аракеттенүүсүнө мүмкүндүк берет.
• кирүү маалыматтарына негизделген көрүнүштү же жүрүм-турумун аныктайт.

Статус:

• конкреттүү компонентке тиешелүү жана аны тарабынан башкарылат.
• компоненттин ичинде өзгөрүлмө (mutable).
• убакыттын өтүшү менен өзгөрө турган жана компоненттин рендерине таасир эткен маалыматтарды көрсөтөт.
• статус өзгөртүлгөндө компонент жана анын мураскорлору кайра рендерделет.

Негизги айырмачылыктарды таблица түрүндө көрсөтсө болот:

Өзгөчөлүк	Пропс	Статус
Чыганак	Ата-энеден компонентке	Өзүнчө компонент
Өзгөрүлмө	Өзгөрүлбөйт (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;