React-də props və vəziyyət arasındakı fərq nədir?

Props (xüsusiyyətlər) və vəziyyət (state) React komponentlərində məlumatların idarə olunmasında iki əsas mexanizmdir.

Props:

• Ata komponentdən uşaq komponentə ötürülür.
• Uşaq komponentində dəyişdirilə bilməz (immutable).
• Komponentlər arasında qarşılıqlı əlaqəni təmin edir.
• Giriş məlumatlarına əsaslanaraq komponentin görünüşünü və ya davranışını müəyyən edir.

Vəziyyət:

• Müəyyən bir komponentə aiddir və onun tərəfindən idarə olunur.
• Komponent daxilində dəyişdirilə bilər (mutable).
• Zamanla dəyişə bilən və komponentin render olunmasına təsir edən məlumatları təmsil edir.
• Vəziyyət dəyişiklikləri komponentin və onun uşaqlarının yenidən render olunmasına səbəb olur.

Əsas fərqlər cədvəl şəklində təqdim oluna bilər:

Xüsusiyyət	Props	Vəziyyət
Mənbə	Ata komponent	Öz komponenti
Dəyişdirilə bilmə	Dəyişdirilə bilməz (immutable)	Dəyişdirilə bilər (mutable)
İdarəetmə	Xaricdən ötürülür	Daxilində idarə olunur
Məqsəd	Xarici məlumatların göstərilməsi və tənzimlənməsi	Daxili vəziyyətin idarə olunması
Dəyişiklik nəticəsində	Yenidən render olunur, dəyişiklikdə	Dəyişiklikdə yenidən render olunur

Props istifadə nümunəsi:

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

function ParentComponent() {
  const message = "Valideyn tərəfindən salam!";
  return (
    <div>
      <ChildComponent text={message} /> {/* "text" props ötürülür */}
    </div>
  );
}

export default ParentComponent;

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

function ChildComponent(props) {
  return (
    <p>{props.text}</p> {/* "text" props istifadə olunur */}
  );
}

export default ChildComponent;

Vəziyyət istifadəsi nümunəsi:

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

function Counter() {
  const [count, setCount] = useState(0); // "count" vəziyyətinin başlanğıcı

  const increment = () => {
    setCount(count + 1); // Vəziyyətin dəyişdirilməsi
  };

  return (
    <div>
      <p>Sayaç: {count}</p>
      <button onClick={increment}>Artır</button>
    </div>
  );
}

export default Counter;