React-ში props-ები და სტატუსის შორის რა განსხვავებაა?

Props (props) და მდგომარეობა (state) არის ორი ძირითადი მექანიზმი მონაცემების მართვაში React კომპონენტებში:

Props:

• გადაეცემა მშობელი კომპონენტიდან შვილს.
• შიგნით შვილს უცვლელია (immutable).
• საშუალებას აძლევს კომპონენტებს ურთიერთქმედება ერთმანეთთან.
• განსაზღვრავს გარეგნულ სახეს ან ქცევას კომპონენტის შემოსული მონაცემების საფუძველზე.

მდგომარეობა:

• მიეკუთვნება კონკრეტულ კომპონენტს და მასზე მართვადია.
• შიგნით კომპონენტში მერყევია (mutable).
• წარმოადგენს მონაცემებს, რომლებიც შეიძლება შეიცვალოს დროის განმავლობაში და გავლენას ახდენს კომპონენტის რენდერებაზე.
• მდგომარეობის ცვლილება იწვევს კომპონენტის და მისი შთამომავლების გადახატვას.

ძირითადი განსხვავებები შეიძლება წარმოდგენილი იყოს ცხრილის სახით:

მახასიათებელი	Props	მდგომარეობა
წყარო	მშობელი კომპონენტი	თავად კომპონენტი
მერყევობა	უცვლელი	მერყევი
მართვა	გადაეცემა გარედან	მართვადია შიგნიდან
დანიშნულება	მონაცემების ჩვენება გარედან, კონფიგურაცია	შიგნით მდგომარეობის მართვა
ცვლილება გამოიწვევს	გადახატვას მშობელში ცვლილებისას	გადახატვას მიმდინარე კომპონენტში ცვლილებისას

პრაქტიკული მაგალითი props-ის გამოყენების:

// 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;