React'da komponentlarning holatini qanday to'g'ri…

Reactda holat o'zgarishi setState metodi yoki funksional komponentlar uchun useState hook yordamida amalga oshiriladi.

Sinf komponentlari:

// Reactni import qilamiz
import React, { Component } from 'react';

// Sinf komponentini yaratamiz
class MyComponent extends Component {
  // Holatni boshlaymiz
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // Holatni o'zgartiruvchi metod
  incrementCount = () => {
    // setState dan foydalanamiz
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Hisoblagich: {this.state.count}</p>
        <button onClick={this.incrementCount}>O'stirish</button>
      </div>
    );
  }
}

// Komponentni eksport qilamiz
export default MyComponent;

setState asinxron.
setState yangi holatni mavjud holat bilan birlashtiradi (shallow merge).
setState funksiyani qabul qilishi mumkin, u avvalgisiga asoslangan yangi holatni qaytaradi:

// Funksiya yordamida holatni o'zgartirish
incrementCountFunction = () => {
  this.setState((prevState) => ({
    count: prevState.count + 1
  }));
};

Funktsional komponentlar (useState bilan):

// React va useState ni import qilamiz
import React, { useState } from 'react';

// Funktsional komponent yaratamiz
function MyFunctionComponent() {
  // useState yordamida holatni boshlaymiz
  const [count, setCount] = useState(0); // [hozirgi holat, yangilash funksiyasi]

  // Holatni o'zgartiruvchi funksiya
  const incrementCount = () => {
    // Yangilash funksiyasidan foydalanamiz
    setCount(count + 1);
  };

  return (
    <div>
      <p>Hisoblagich: {count}</p>
      <button onClick={incrementCount}>O'stirish</button>
    </div>
  );
}

// Komponentni eksport qilamiz
export default MyFunctionComponent;

useState hozirgi holat va uni yangilash uchun funksiya bilan ikkita elementli massivni qaytaradi.
useState tomonidan qaytarilgan yangilash funksiyasi hozirgi holatni o'zgartirmaydi, balki o'rnini bosadi.
Agar yangi holat avvalgisiga bog'liq bo'lsa, funksiyani uzatish mumkin:

// Holatni o'zgartiruvchi funksiya
const incrementCountFunction = () => {
  setCount(prevCount => prevCount + 1);
};

Holatni o'zgartirishda muhim nuqtalar:

Holatni to'g'ridan-to'g'ri o'zgartirmang: Hech qachon state xususiyatiga yangi qiymat tayin qilmang (this.state.count = 5 yoki count = 5). React bu o'zgarishni aniqlamaydi va komponent qayta render qilinmaydi.
Obyektlar va massivlarni o'zgartirish: Holatda obyekt yoki massivni o'zgartirayotganda, har doim yangi nusxalarini yarating. React obyekt/massivga bo'lgan havolalarni solishtiradi, va agar havola o'zgarmasa, React ma'lumotlar o'zgarmagan deb hisoblaydi va qayta render qilmaydi.

// Sinf komponentida obyektni o'zgartirish
this.setState(prevState => ({
  user: {
    ...prevState.user, // Eski xususiyatlarni nusxalash
    name: 'Yangi nom' // Kerakli xususiyatni yangilash
  }
}));

// Funktsional komponentda massivni o'zgartirish
setItems(prevItems => [...prevItems, 'Yangi element']); // Yangi element qo'shish

setState ning asinxronligi: Agar holat yangilanganidan va komponent qayta render qilingandan so'ng biror amal bajarishni istasangiz, setState ning ikkinchi argumenti (callback funktsiya) yoki useEffect hookidan foydalaning.

// setState'da callback
this.setState({ count: this.state.count + 1 }, () => {
  console.log('Holat yangilandi!');
});

// useEffect yordamida holat o'zgarishiga javob berish
useEffect(() => {
  console.log('Count holati o'zgardi:', count);
}, [count]); // Bog'liqlik: hook count o'zgarganda ishga tushadi

Usullarning taqqoslanishi:

Xususiyat	Sinf komponent (`setState`)	Funktsional komponent (`useState`)
Sintaksis	`this.setState(newState[, callback])`	`const [state, setState] = useState(initialState)`
Birlashtirish / O'rnini bosish	Yangi holatni mavjud bilan birlashtiradi (shallow merge)	Yangi holat bilan o'rnini bosadi
Asinxron	Asinxron	Reactning render fazasida chaqirilganda asinxron, voqea handlerlaridan chaqirilganda sinxron
Oldingi holatga bog'liqlik	`this.setState(prevState => ({...}))` funksiyasini uzatish	`setState(prev => ({...}))` funksiyasini uzatish

React'da komponentlarning holatini qanday to'g'ri o'zgartirish mumkin?