React class komponentlari

React 16.8 dan oldin Class componentlari React componentida state va lifecycle-ni (hayotiy siklni) boshqarishning yagona usuli edi. Funksional componentlar esa "stateless" (ichki state saqlamaydigan) hisoblangan.

Hooks qo‘shilishi bilan Funksiya componentlari endi Class componentlariga deyarli teng. Farqlar shunchalik kichikki, Reactda hech qachon Class componentidan foydalanishga hojat qolmaydi.

Funksiya componentlari afzal bo‘lsa ham, React-dan Class componentlarini olib tashlash bo‘yicha hozircha rejalar mavjud emas.

Ushbu bo‘lim sizga Reactda Class componentlaridan qanday foydalanish haqida umumiy ma’lumot beradi.

Ushbu bo‘limni o‘tkazib yuboring va uning o‘rniga Funksiya componentlaridan foydalaning.

React componentlari

Componentlar mustaqil va qayta ishlatiladigan kod bitlaridir. Ular JavaScript funksiyalari bilan bir xil maqsadga xizmat qiladi, biroq yakka holda ishlaydi va render funksiyasi orqali HTMLni qaytaradi.

Componentlar ikki xil bo‘ladi, Class componentlari va Function componentlari, bu bobda siz Class componentlari haqida bilib olasiz.

Class componentini yarating

React componentini yaratishda component nomi katta harf bilan boshlanishi kerak.

Component extends React.Component operatorini o‘z ichiga olishi kerak, bu operator meros hosil qiladi React.Component va componentingizga React.Component funksiyalariga kirish imkonini beradi.

Component render() usulini ham talab qiladi, bu metod HTMLni qaytaradi.

Misol

Car nomli Class componentini yarating:

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

Endi sizning React ilovangiz <h2> elementini qaytaradigan Car nomli componentga ega.

Ushbu componentni ilovangizda ishlatish uchun oddiy HTML kabi sintaksisdan foydalaning: <Car />

Misol

Car componentini "root" elementida aks ettiring (render qiling):

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

Misolni ishga tushirish »

Component konstruktori

Agar componentingizda constructor() funksiyasi mavjud bo‘lsa, bu funksiya bo‘lganda chaqiriladi component ishga tushadi.

Konstruktor funksiyasi componentning xususiyatlarini ishga tushiradigan joydir.

React-da component xususiyatlari chaqirilgan obyektda saqlanishi kerak state .

state haqida keyinroq bilib olasiz ushbu qo‘llanma.

Konstruktor funksiyasi, shuningdek, asosiy componentning konstruktor funksiyasini bajaradigan super() operatorini qo‘shish orqali ota component (React.Component) konstruktorini chaqirasiz va uning barcha imkoniyatlaridan foydalanish huquqiga ega bo‘lasiz.

Misol

Car componentida konstruktor funksiyasini yarating va rang xususiyatini qo‘shing:

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a Car!</h2>;
  }
}

render funksiyasida rang xususiyatidan foydalaning:

Misol

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a {this.state.color} Car!</h2>;
  }
}

Misolni ishga tushirish »

Props

Component xususiyatlarini qayta ishlashning yana bir usuli props dan foydalanishdir.

Proplar funksiya argumentlariga o‘xshaydi va siz ularni componentga atributlar sifatida yuborasiz.

Keyingi bobda props haqida ko‘proq bilib olasiz.

Misol

Rangni Car componentiga o‘tkazish uchun atributdan foydalaning va undan foydalaning render funksiyasi:

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.color} Car!</h2>;
  }
}

createRoot(document.getElementById('root')).render(
  <Car color="red"/>
);

Misolni ishga tushirish »

Konstruktorda props

Agar sizning componentingizda konstruktor funksiyasi bo‘lsa, props har doim constructor ga, shuningdek, super() usuli orqali React.Component ga uzatilishi kerak.

Misol

class Car extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h2>I am a {this.props.model}!</h2>;
  }
}

createRoot(document.getElementById('root')).render(
  <Car model="Mustang"/>
);

Misolni ishga tushirish »

Componentlardagi componentlar

Boshqa componentlar ichidagi componentlarga murojaat qilishimiz mumkin:

Misol

Car komponentini Garage komponenti ichida ishlating:

class Car extends React.Component {
  render() {
    return <h2>I am a Car!</h2>;
  }
}

class Garage extends React.Component {
  render() {
    return (
      <div>
      <h1>Who lives in my Garage?</h1>
      <Car />
      </div>
    );
  }
}

createRoot(document.getElementById('root')).render(
  <Garage />
);

Misolni ishga tushirish »

Fayllardagi componentlar

React - bu kodni qayta ishlatish bilan bog‘liq va ba’zi componentlaringizni alohida fayllarga kiritish oqilona bo‘lishi mumkin.

Buning uchun .jsx kengaytmali yangi fayl yarating va uning ichiga kodni qo‘ying:

E’tibor bering, fayl (avvalgidek) React’ni import qilish bilan boshlanishi va export default Car; operatori bilan tugashi kerak.

Misol

Bu yangi fayl, biz uni Vehicle.jsx deb nomladik:

import React from 'react';

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

export default Car;

Car componentidan foydalanish uchun Vehicle.jsx faylini import qilishingiz kerak. ilova.

Misol

Endi biz ilovaga Vehicle.jsx faylini import qilamiz va Car componentidan xuddi shu yerda yaratilgandek foydalanishimiz mumkin.

import { createRoot } from 'react-dom/client'
import Car from './Vehicle.jsx';

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

Misolni ishga tushirish »

React sinfi component holati

React klass komponentlarida o‘rnatilgan state obyekti mavjud.

Ilgari componentlar konstruktori bo‘limida state dan foydalanganimizni payqagan bo‘lishingiz mumkin.

state obyekti componentga tegishli xususiyat qiymatlarini saqlaydigan joy.

state obyekti o‘zgarganda component qayta render qilinadi (re-render bo‘ladi).

State obyektini yaratish

state obyekti constructor da ishga tushiriladi:

Misol

constructor usulida state obyektini belgilang:

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

state obyekti siz xohlagancha ko‘p xususiyatlarni o‘z ichiga olishi mumkin:

Misol

Componentingizga kerak bo‘lgan barcha xususiyatlarni belgilang:

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

`state` obyektidan foydalanish

this.state.propertyname sintaksisidan foydalanib, componentning istalgan joyida state obyektiga murojaat qiling:

Misol:

render() metodida state obyektidan foydalanish:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
      </div>
    );
  }
}

Misolni ishga tushirish »

Changing the `state` Object

state obyektidagi qiymatni o‘zgartirish uchun this.setState() usulidan foydalaning.

state obyektidagi qiymat o‘zgarganda komponent qayta render qilinadi, ya’ni natija yangi qiymat(lar)ga muvofiq o‘zgaradi.

Misol:

Rang xususiyatini o‘zgartiradigan onClick hodisasi bilan tugma qo‘shing:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  changeColor = () => {
    this.setState({color: "blue"});
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
        <button
          type="button"
          onClick={this.changeColor}
        >Change color</button>
      </div>
    );
  }
}

Misolni ishga tushirish »

state obyektini o‘zgartirish uchun doimo setState() metodidan foydalaning; bu komponent yangilanganini bilishini va render() metodini (hamda boshqa barcha lifecycle metodlarini) chaqirishini ta’minlaydi.

Componentlarning hayotiy sikli (Lifecycle)

React-ning har bir componentida uning uchta asosiy bosqichida kuzatishingiz va boshqarishingiz mumkin bo‘lgan lifecycle-i (hayotiy sikli) mavjud.

Uchta asosiy bosqich: Mounting (o‘rnatish), Updating (yangilash) va Unmounting (o‘chirish).

Mounting (DOMga o‘rnatish)

Mounting (DOMga o‘rnatish) — elementlarni DOMga joylashtirishni anglatadi.

React-da to‘rtta o‘rnatilgan metod bor, ular component Mounting (DOMga o‘rnatish) jarayonida quyidagi tartibda chaqiriladi:

constructor()
getDerivedStateFromProps()
render()
componentDidMount()

render() usuli talab qilinadi va har doim chaqiriladi, qolganlari ixtiyoriy va agar siz ularni aniqlasangiz chaqiriladi.

konstruktor

constructor() metodi hamma narsadan oldin, component ishga tushirilganda chaqiriladi va boshlang‘ich state hamda boshqa boshlang‘ich qiymatlarni sozlash uchun eng tabiiy joy hisoblanadi.

constructor() usuli bilan chaqiriladi props , argument sifatida va siz har doim kerak oldin super(props) ni chaqirishdan boshlang boshqa har qanday holatda, bu ota-onaning konstruktor usulini ishga tushiradi va ruxsat beradi uning ota-onasidan usullarni meros qilib olish uchun component (React.Component ).

Misol:

constructor usuli chaqiriladi, tomonidan Har safar component yaratganingizda javob bering:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

createRoot(document.getElementById('root')).render(
  <Header />
);

Misolni ishga tushirish »

getDerivedStateFromProps

getDerivedStateFromProps() metodi element(lar) DOM’da render qilinishidan bevosita oldin chaqiriladi.

Bu state obyektini boshlang‘ich props asosida belgilash uchun eng tabiiy joy.

Argument sifatida state ni oladi va obyektni o‘zgartirgan holda qaytaradi state .

Quyidagi misol sevimli rang "qizil" bilan boshlanadi, lekin getDerivedStateFromProps() usuli favcol atributiga asoslangan sevimli rangni yangilaydi:

Misol:

getDerivedStateFromProps usuli render usulidan oldin chaqiriladi:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

createRoot(document.getElementById('root')).render(
  <Header favcol="yellow"/>
);

Misolni ishga tushirish »

render() metodi

render() usuli talab qilinadi va u aslida HTMLni DOMga chiqaradigan usuldir.

Misol:

Oddiy render() usuli bilan oddiy component:

class Header extends React.Component {
  render() {
    return (
      <h1>This is the content of the Header component</h1>
    );
  }
}

createRoot(document.getElementById('root')).render(
  <Header />
);

Misolni ishga tushirish »

componentDidMount

componentDidMount() usuli keyin chaqiriladi component ko‘rsatiladi.

Bu yerda component allaqachon DOM-ga joylashtirilgan bo‘lishini talab qiluvchi operatorlarni ishga tushirasiz.

Misol:

Boshida mening sevimli rangim qizil, ammo bir soniyadan so‘ng u sariq rangga o‘zgaradi:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

createRoot(document.getElementById('root')).render(
  <Header />
);

Misolni ishga tushirish »

Yangilanmoqda

Hayotiy siklning keyingi bosqichi componentning yangilanishidir.

Componentda o‘zgarishlar bo‘lganda component yangilanadi state yoki props .

React-da component yangilanganda quyidagi tartibda chaqiriladigan beshta o‘rnatilgan metod mavjud:

getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

render() usuli talab qilinadi va har doim chaqiriladi, qolganlari ixtiyoriy va agar siz ularni aniqlasangiz chaqiriladi.

getDerivedStateFromProps

Shuningdek, yangilanishlarda getDerivedStateFromProps usuli chaqiriladi. Bu component yangilanganda chaqiriladigan birinchi metod.

Bu hali ham state obyektini boshlang‘ich props asosida belgilash uchun eng tabiiy joy.

Quyidagi misolda sevimli rangni ko‘k rangga o‘zgartiruvchi tugma mavjud, biroq favcol atributidagi rang bilan holatni yangilaydigan getDerivedStateFromProps() usuli chaqirilgani uchun sevimli rang hali ham sariq rangda ko‘rsatiladi:

Misol:

Agar component yangilansa, getDerivedStateFromProps() usuli chaqiriladi:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

createRoot(document.getElementById('root')).render(
  <Header favcol="yellow" />
);

Misolni ishga tushirish »

shouldComponentUpdate

shouldComponentUpdate() usulida siz React renderlashda davom etishi yoki davom etmasligini belgilaydigan mantiqiy qiymatni qaytarishingiz mumkin.

Standart qiymat true .

Quyidagi misol shouldComponentUpdate() usuli false ni qaytarganda nima sodir bo‘lishini ko‘rsatadi:

Misol:

Har qanday yangilanishda componentni ko‘rsatishni to‘xtating:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate() {
    return false;
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

createRoot(document.getElementById('root')).render(
  <Header />
);

Misolni ishga tushirish »

Misol:

Yuqoridagi kabi bir xil misol, lekin bu safar shouldComponentUpdate() usuli o‘rniga true qiymatini qaytaradi:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate() {
    return true;
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

createRoot(document.getElementById('root')).render(
  <Header />
);

Misolni ishga tushirish »

render() metodi

render() usuli, albatta, component yangilanganda chaqiriladi, u yangi o‘zgarishlar bilan HTMLni DOMga qayta ko‘rsatishi kerak.

Quyidagi misolda sevimli rangni ko‘k rangga o‘zgartiruvchi tugma mavjud:

Misol:

Component holatini o‘zgartirish uchun tugmani bosing:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

createRoot(document.getElementById('root')).render(
  <Header />
);

Misolni ishga tushirish »

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate() usulida siz props ga kirishingiz mumkin va state yangilanishdan oldin, ya’ni yangilanishdan keyin ham qiymatlar oldin qanday ekanligini tekshirishingiz mumkin yangilash.

Agar getSnapshotBeforeUpdate() usuli mavjud bo‘lsa, siz componentDidUpdate() usulini ham kiritishingiz kerak, aks holda xatolik yuz beradi.

Quyidagi misol murakkab bo‘lib tuyulishi mumkin, ammo u faqat shunday qiladi:

Component o‘rnatilganda u sevimli rang "qizil" bilan ko‘rsatiladi.

Component o‘rnatilgandan so‘ng, taymer holatni o‘zgartiradi va bir soniyadan so‘ng sevimli rang "sariq" bo‘ladi.

Ushbu harakat yangilanish bosqichini ishga tushiradi va bu componentda getSnapshotBeforeUpdate() usuli mavjud bo‘lgani uchun bu metod bajariladi va bo‘sh DIV1 elementiga xabar yozadi.

Keyin componentDidUpdate() usuli bajariladi va bo‘sh DIV2 elementiga xabar yozadi:

Misol:

dan foydalaning Buni bilish uchun getSnapshotBeforeUpdate() usuli state obyekti avval qanday ko‘rinishga ega edi yangilanish:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    document.getElementById("div1").innerHTML =
    "Before the update, the favorite was " + prevState.favoritecolor;
  }
  componentDidUpdate() {
    document.getElementById("div2").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
      <div>
        <h1>My Favorite Color is {this.state.favoritecolor}</h1>
        <div id="div1"></div>
        <div id="div2"></div>
      </div>
    );
  }
}

createRoot(document.getElementById('root')).render(
  <Header />
);

Misolni ishga tushirish »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish