React'da propslar va holat o'rtasidagi farq nima?

Props (xususiyatlar) va holat (state) React komponentlarida ma'lumotlarni boshqarish uchun ikki asosiy mexanizmdir.

Props:

• Otadan bolaga o'tkaziladi.
• Boladagi komponent ichida o'zgartirilmaydi (immutable).
• Komponentlar o'rtasida o'zaro ta'sir qilish imkonini beradi.
• Kirish ma'lumotlariga asoslangan holda komponentning tashqi ko'rinishi yoki xulqini belgilaydi.

Holat:

• Maxsus bir komponentga tegishli bo'lib, uni tomonidan boshqariladi.
• Komponent ichida o'zgaruvchan (mutable).
• Vaqt o'tishi bilan o'zgarishi mumkin bo'lgan va komponentning render qilinishiga ta'sir qiladigan ma'lumotlarni ifodalaydi.
• Holat o'zgarganda, komponent va uning bolalari qayta render qilinadi.

Asosiy farqlarni jadval shaklida taqdim etish mumkin:

Xususiyat	Props	Holat
Manba	Otaviy komponent	O'z komponenti
O'zgartirish mumkinligi	O'zgartirilmaydi (immutable)	O'zgartiriladi (mutable)
Boshqarish	Tashqaridan o'tkaziladi	Ichki boshqaruvda
Maqsad	Tashqi ma'lumotlarni ko'rsatish, sozlash	Ichki holatni boshqarish
O'zgartirish natijasida	Otaviy o'zgarishda qayta render qilish	Hozirgi komponentda o'zgarishda qayta render qilish

Propsdan foydalanish misoli:

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

function ParentComponent() {
  const message = "Otadan salom!";
  return (
    <div>
      <ChildComponent text={message} /> {/* "text" props o'tkazish */}
    </div>
  );
}

export default ParentComponent;

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

function ChildComponent(props) {
  return (
    <p>{props.text}</p> {/* "text" propsdan foydalanish */}
  );
}

export default ChildComponent;

Holatdan foydalanish misoli:

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

function Counter() {
  const [count, setCount] = useState(0); // "count" holatini boshlash

  const increment = () => {
    setCount(count + 1); // Holatni o'zgartirish
  };

  return (
    <div>
      <p>Hisoblagich: {count}</p>
      <button onClick={increment}>O'stirish</button>
    </div>
  );
}

export default Counter;