Ի՞նչ է React-ում props-ների և վիճակի տարբերությունը։

Props (props) և վիճակ (state) - դա երկու հիմնական մեխանիզմներ են տվյալների կառավարման React կոմպոնենտներում:

Props:

• փոխանցվում են ծնողական կոմպոնենտից երեխային:
• անփոփոխ (immutable) են երեխային ներսում:
• թույլ են տալիս կոմպոնենտներին փոխազդել միմյանց:
• որոշում են արտաքին տեսքը կամ վարքը կոմպոնենտի մուտքային տվյալների հիման վրա:

Վիճակ:

• պատկանում է կոնկրետ կոմպոնենտին և կառավարվում է նրանով:
• փոփոխական (mutable) է կոմպոնենտի ներսում:
• ներկայացնում է տվյալներ, որոնք կարող են փոխվել ժամանակի ընթացքում և ազդել կոմպոնենտի ռենդերավորման վրա:
• վիճակի փոփոխությունը հանգեցնում է կոմպոնենտի և նրա ժառանգների կրկնակի ռենդերավորման:

Հիմնական տարբերությունները կարելի է ներկայացնել աղյուսակի տեսքով:

Գծագիր	Props	Վիճակ
Աղբյուր	Ծնող կոմպոնենտ	Անհատական կոմպոնենտ
Փոփոխականություն	Անփոփոխ (immutable)	Փոփոխական (mutable)
Կառավարում	Հասնում է արտաքինից	Կառավարում է ներսից
Օգտագործում	Դրսից տվյալների ցուցադրում, կարգավորում	Ներքին վիճակի կառավարում
Փոփոխությունը հանգեցնում է	Կրկնակի ռենդերավորում՝ ծնողի փոփոխությունից	Կրկնակի ռենդերավորում՝ ընթացիկ կոմպոնենտի փոփոխությունից

Օրինակ prop-ների օգտագործման:

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

function ParentComponent() {
  const message = "Բարև ծնողից!";
  return (
    <div>
      <ChildComponent text={message} /> {/* Prop "text" փոխանցում */}
    </div>
  );
}

export default ParentComponent;

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

function ChildComponent(props) {
  return (
    <p>{props.text}</p> {/* Prop "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;