კომპონენტები და Prop-ები რეაქთში (reactjs)

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

ფუნქცური და კლასური კომპონენტები რეაქთში (reactjs)

ყველაზე მარტივი გზა რეაქთის კომპონენტის აღსაწერად არის უბრალო ჯავასკრიპტის ფუნქცია

მაგალითი:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

ზემოთ მოცემული ფუნქცია არის ვალიდური რეაქთის კომპონენტი, რადგანაც ის ეთანხმება 1 პარამეტრს სახელად "props" რაც გულისხმობს თვისებებს. მოცემული prop არგუმენტი არის ჯავასკრიპტის ობიექტი, რომელიც შეიცავს მონაცემებს.

ზემოთ მოცემულ მაგალითს რეაქთში ეძახიან ფუნქციური კომპონენტებს (function components) რადგანაც ისინი არის ნამდვილი ჯავასკრიპტ ფუნქციები

რეაქთში ასევე შეგვიძლია გვქონდეს კლასური კომპონენტები ES6 class

მაგალითი:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

ზემოთ აღწერილი კომპონენტები რეაქთის გადმოსახედიდან არის ერთმანეთის ექვივალენტი (ტოლი)

კომპონენტის დარენდერება

წინა გაკვეთილში ჩვენ განვიხილეთ რეაქთი ელემენტები, რომლებიც უბრალოდ წარმოადგენდნენ DOM თეგებს (HTML-ის სელექტორებს)

მაგალითი:

const element = <div />;

რეაქთ ელემენტი ასევე შეიძლება წარმოადგენდეს ჩვენს მიერ შექმნილ კომპონენტს

მაგალითი:

const element = <Welcome name="Sara" />;

როდესაც რეაქთი ხედავს ჩვენს მიერ აღწერილ კომპონენტს ის JSX-ს გადასცემს prop პარამეტრში ელემენტის ატრიბუტის მნიშვნელობებს, რომლებიც წარმოადგენენ ობიექტს

მაგალითი:

function Welcome(props) {  
  return <h1>Hello, {props.name}</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;root.render(element);

ზემოთ ნაჩვენები მაგალითი ბრაუზერში დაარენდერებს ტექსტს "Hello, Sara"

იხილეთ მაგალითი CodePen-ზე

მოდი განვიხილოთ ზემოთ აღწერილი კოდის თანმიმდევრობა

1. ჩვენ გამოვიძახეთ root.render() მეთოდი და გადავეცით <Welcome name="Sara" /> ელემენტი
2. რეაქთმა გამოიძახა Welcome კომპონენტი და prop პარამეტრში გადასცა {name: 'Sara'} ობიექტი
3. ჩვენი Welcome კომპონენტი აბრუნებს <h1>Hello, Sara</h1>-ს
4. რეაქთ DOM-მა წარმატებით განაახლა დოკუმენტი <h1>Hello, Sara</h1> მნიშვნელობით და გამოსახა ბრაუზერში

მნიშვნელოვანი შეტყობინება:

ყოველთვის დაიწყეთ კომპონენტების აღწერა მაღალი რეგისტრის სიმბოლოთი.

რადგანაც რეაქთი დაბალი რეგისტრის სიმბოლოთი აღწერილ ელემენტს აღიქვავს როგორც DOM-ის ელემენტს (HTML-ის სელექტორს, თეგს). მაგალითად: <div/> აღიქმება, როგორც თეგი, ხოლორ <Welcome/> აღიქმება, როგორც კომპონენტი

Prop-ები არ არის მუტაციური

მას შემდეგ რაც ჩვენ ავღწერთ ჩვენს კომპონენტს prop-ების შეცვლა შეუძლებელი ხდება, მაგალითისთვის ავღწეროთ sum ფუნქცია რომელიც ელოდება 2 პარამეტრს a, b

function sum(a, b) {
  return a + b;
}

ზემოთ მოცემულ ფუნქციას ეწოდება "pure" რაც იმას ნიშნავს, რომ ფუნქცია არ ცდილობს გადმოცემული პარამეტრების მნიშვნელობების შეცვლას.

განსხვავების დასანახად შემოვიტანოთ მეორე მაგალითი სადაც ფუნქცია ცდილობს პარამეტრის მნიშვნელობის ცვლილებას

function withdraw(account, amount) {
  account.total -= amount;
}

რეაქთში აუცილებელია ყველა კომპონენტი იქცეოდეს როგორც ე.წ. "pure" ფუნქცია