Class Components

React Sinf Komponentlari

React 16.8 versiyasidan oldin, Sinf komponentlari React komponentlarida holat va hayotiy tsiklni kuzatishning yagona usuli edi. Funktsiya komponentlari "holatsiz" deb hisoblangan.

Hooks qo'shilishi bilan, Funktsiya komponentlari endi Sinf komponentlariga deyarli tengdir. Farqlar shunchalik kichikki, siz ehtimol React-da Sinf komponentlarini ishlatishga ehtiyoj sezmaysiz.

Garchi Funktsiya komponentlari afzalroq bo'lsa-da, hozirda Sinf komponentlarini React-dan olib tashlash rejalari yo'q.

Ushbu bo'lim sizga React-da Sinf komponentlarini qanday ishlatishni umumiy ko'rinishda taqdim etadi.

Agar Siz Sinf komponentlarini o'tkazib yuborishni xohlasangiz va Funktsiya Komponentlarini ishlatishni afzal ko'rsangiz, ushbu bo'limni o'tkazishingiz mumkin.

Komponentlar mustaqil va qayta ishlatiladigan kod qismlaridir. Ular JavaScript funksiyalarining o'ziga xos maqsadini bajaradi, lekin izolyatsiya qilingan holda ishlaydi va render() funktsiyasi orqali HTML qaytaradi.

Komponentlar ikkita turga bo'linadi: Sinf komponentlari va Funktsiya komponentlari. Ushbu bo'limda Sinf komponentlarini o'rganasiz.

Sinf Komponentini Yaratish

React komponenti yaratishda, komponent nomi katta harf bilan boshlanishi kerak.

Komponent extends React.Component bayonotini o'z ichiga olishi kerak. Ushbu bayonot React.Component-ga merosni yaratadi va sizning komponentingizga React.Component funksiyalaridan foydalanish imkonini beradi.

Komponent shuningdek render() metodini talab qiladi, ushbu metod HTML qaytaradi.

Misol Car deb nomlangan Sinf komponentini yarating:

class Car extends React.Component {
  render() {
    return <h2>Salom, men Carman!</h2>;
  }
}

Endi sizning React ilovangizda Car deb nomlangan komponent mavjud bo'lib, <h2> elementini qaytaradi.

Ushbu komponentni ilovangizda ishlatish uchun, HTML kabi sintaksisdan foydalaning: <Car />

Misol Car komponentini "root" elementida ko'rsating:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

Komponent Konstruktor

Agar komponentingizda constructor() funktsiyasi mavjud bo'lsa, ushbu funksiya komponent yaratilib bo'lgandan so'ng chaqiriladi.

Konstruktor funksiyasi komponentning xususiyatlarini boshlang'ich qiymatlarni aniqlash uchun ishlatiladi.

React-da, komponent xususiyatlari state deb nomlangan obyekt ichida saqlanishi kerak.

Misol Car komponentida konstruktor funksiyasini yarating va color xususiyatini qo'shing:

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "qizil"};
  }
  render() {
    return <h2>Men bir {this.state.color} Car!</h2>;
  }
}

Props

Komponent xususiyatlarini boshqarishning yana bir usuli - bu propslardan foydalanish.

Propslar funksiyalarga o'xshash bo'lib, siz ularni atribut sifatida komponentga yuborasiz.

Misol Car komponentiga rangni atribut sifatida yuboring va render() funksiyasida foydalaning:

class Car extends React.Component {
  render() {
    return <h2>Men bir {this.props.color} Carman!</h2>;
  }
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car color="qizil"/>);

Komponentlar Ichida Komponentlar

Biz komponentlarni boshqa komponentlar ichida ishlatishimiz mumkin:

Misol Car komponentini Garage komponentida ishlating:

class Car extends React.Component {
  render() {
    return <h2>Men bir Carman!</h2>;
  }
}
 
class Garage extends React.Component {
  render() {
    return (
      <div>
        <h1>Menim Garajimda kim yashaydi?</h1>
        <Car />
      </div>
    );
  }
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

Komponentlar Fayllarda

React kodni qayta ishlatish bilan bog'liq va tavsiya etiladi, ba'zi komponentlarni alohida fayllarda saqlash.

Buni amalga oshirish uchun, yangi fayl yaratib, kodni ichiga qo'ying:

Eslatma: Fayl nomi katta harf bilan boshlanishi kerak.

Misol Bu yangi fayl, biz uni Car.js deb nomladik:

import React from 'react';
 
class Car extends React.Component {
  render() {
    return <h2>Salom, men Carman!</h2>;
  }
}
 
export default Car;

Car komponentini ishlatish uchun, siz ushbu faylni ilovangizga import qilishingiz kerak.

Misol Endi Car.js faylni ilovaga import qilamiz va Car komponentini, u bu yerda yaratilganidek ishlatamiz:

import React from 'react';
import ReactDOM from 'react-dom/client';
import Car from './Car.js';
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

React Sinf Komponentlarining Holati

React Sinf komponentlari o'z ichiga kiruvchi holat obyektiga ega.

Siz holatni avvalgi bo'limda komponent konstruktorida ishlatganingizni ko'rgan bo'lishingiz mumkin.

Holat obyekti komponentga tegishli qiymatlarni saqlash uchun ishlatiladi.

Holat obyekti o'zgarganda, komponent qayta rendirlanadi.

Misol Konstruktor metodida holat obyektini aniqlang:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {brand: "Ford"};
  }
  render() {
    return (
      <div>
        <h1>Menim Car</h1>
      </div>
    );
  }
}

Holat obyekti istalgancha xususiyatlarni o'z ichiga olishi mumkin:

Misol Komponentingizga kerakli barcha xususiyatlarni aniqlang:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "qizil",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>Menim Car</h1>
      </div>
    );
  }
}

Holat Obyektini Ishlatish Holat obyektiga komponent ichida this.state.propertyname sintaksisi orqali murojaat qiling:

Misol render() metodida holat obyektiga murojaat qiling:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "qizil",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>Menim {this.state.brand}</h1>
        <p>
          Bu {this.state.color}
          {this.state.model}
          {this.state.year} yilgi.
        </p>
      </div>
    );
  }
}

Holat Obyektini O'zgartirish Holat obyektidagi qiymatni o'zgartirish uchun, this.setState() metodidan foydalaning.

Holat obyektidagi qiymat o'zgarganda, komponent qayta rendirlanadi, ya'ni chiqish yangi qiymatga mos ravishda o'zgaradi.

Misol Rang xususiyatini o'zgartiradigan tugmani qo'shing:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "qizil",
      year: 1964
    };
  }
  changeColor = () => {
    this.setState({color: "ko'k"});
  }
  render() {
    return (
      <div>
        <h1>Menim {this.state.brand}</h1>
        <p>
          Bu {this.state.color}
          {this.state.model}
          {this.state.year} yilgi.
        </p>
        <button
          type="button"
 
 
          onClick={this.changeColor}>
          Rangni o'zgartiring
        </button>
      </div>
    );
  }
}

Bu tugma bosilganda, changeColor metodi chaqiriladi va holatning color xususiyati yangi qiymatga o'zgartiriladi. Komponent qayta rendirlanadi va yangi rang ko'rsatiladi.

ComponentDidMount va boshqa Hayotiy Tsikl Metodlari

React Sinf komponentlari o'z hayotiy tsikliga ega. Komponent hayotiy tsikliga quyidagi metodlar kiradi:

componentDidMount(): Komponent birinchi bor DOMga qo'shilganidan so'ng chaqiriladi.
componentDidUpdate(prevProps, prevState): Komponent yangilanganidan so'ng chaqiriladi.
componentWillUnmount(): Komponent DOMdan olib tashlangandan so'ng chaqiriladi.

Misol componentDidMount metodini qo'shing:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "qizil",
      year: 1964
    };
  }
  componentDidMount() {
    console.log('Komponent DOMga qo\'shildi!');
  }
  render() {
    return (
      <div>
        <h1>Menim {this.state.brand}</h1>
        <p>
          Bu {this.state.color}
          {this.state.model}
          {this.state.year} yilgi.
        </p>
      </div>
    );
  }
}

Foydalanuvchi Holati

Siz sinf komponentlarini yaxshi bilishingiz va biror holatda qabul qilish uchun ularni ishlatishingiz mumkin. Holatlar va propslar bilan tajriba orttirishingiz mumkin.

Ushbu bo'limda siz React Sinf komponentlarining asosiy xususiyatlarini o'rgandingiz. Keling, bu tushunchalarni amaliyotda sinab ko'ring!