Reactте компоненттердин абалын туура өзгөртүү жолдору…

React-теги абалын өзгөртүү setState методу аркылуу класстуу компоненттер үчүн же useState хуку аркылуу функционалдык компоненттер үчүн жүргүзүлөт.

Класстуу компоненттер:

// Reactти импорттоо
import React, { Component } from 'react';

// Класс компонент түзүү
class MyComponent extends Component {
  // Абалды баштоо
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // Абалды өзгөртүү методу
  incrementCount = () => {
    // `setState` колдонуу
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Счётчик: {this.state.count}</p>
        <button onClick={this.incrementCount}>Көбөйтүү</button>
      </div>
    );
  }
}

// Компонентти экспорттоо
export default MyComponent;

setState асинхрондуу.
setState жаңы абалды учурдагы менен бириктирет (shallow merge).
setState функцияны кабыл алса болот, ал мурдагыга негизделген жаңы абалды кайтарат:

// Функцияны колдонуу менен абалды өзгөртүү
incrementCountFunction = () => {
  this.setState((prevState) => ({
    count: prevState.count + 1
  }));
};

Функционалдык компоненттер (useState колдонуу):

// React жана useState импорттоо
import React, { useState } from 'react';

// Функционалдык компонент түзүү
function MyFunctionComponent() {
  // `useState` менен абалды баштоо
  const [count, setCount] = useState(0); // [азыркы абал, жаңыртуу функциясы]

  // Абалды өзгөртүү функциясы
  const incrementCount = () => {
    // Жаңыртуу функциясын колдонуу
    setCount(count + 1);
  };

  return (
    <div>
      <p>Счётчик: {count}</p>
      <button onClick={incrementCount}>Көбөйтүү</button>
    </div>
  );
}

// Компонентти экспорттоо
export default MyFunctionComponent;

useState эки элементтен турган массив кайтарат: учурдагы абал жана аны жаңыртуу функциясы.
useState кайтарган жаңыртуу функциясы азыркы абалды алмаштырат, бириктирбейт.
Эгер жаңы абал мурдагыга көз каранды болсо, функцияны өткөрсө болот:

// Мурдагыга көз каранды болгон жаңыртуу функциясы
const incrementCountFunction = () => {
  setCount(prevCount => prevCount + 1);
};

Маанилүү учурлар:

Абалды түздөн-түз өзгөртпөңүз: эч качан state мүчөсүнө жаңы маанини түздөн-түз жазбаңыз (мисалы, this.state.count = 5 же count = 5). React бул өзгөрүүнү байкабайт жана компонент кайра жүктөлбөйт.
Объекттер жана массивдер менен иштөө: Объекттер же массивдер менен иштөөдө, дайыма жаңы көчүрмөлөрүн түзүңүз. React шилтемелерди салыштырат, жана эгер шилтеме өзгөрбөсө, анда өзгөрүүлөр болгон деп эсептебейт жана кайра жүктөбөйт.

// Класс компонентинде объектти өзгөртүү
this.setState(prevState => ({
  user: {
    ...prevState.user, // Эски мүчөлөрдүн көчүрмөсү
    name: 'Жаңы ат' // Керектүү мүчөнү жаңыртуу
  }
}));

// Функционалдык компонентте массивди өзгөртүү
setItems(prevItems => [...prevItems, 'Жаңы элемент']); // Жаңы элемент кошуу

setState асинхрондуулугу: Эгер сиз абал жаңыртылгандан кийин жана компонент кайра жүктөлгөндөн кийин ишти аткаргыңыз келсе, setState экинчи аргументин (callback функциясы) же useEffect хукун колдонуп көрүңүз.

// `setState` callback
this.setState({ count: this.state.count + 1 }, () => {
  console.log('Абал жаңырды!');
});

// `useEffect` аркылуу абал өзгөргөндө реакция
useEffect(() => {
  console.log('Count өзгөрдү:', count);
}, [count]); // көз карандылык: `count` өзгөргөндө иштейт

Методдорду салыштыруу:

Өзгөчөлүк	Класстуу компонент (`setState`)	Функционалдык компонент (`useState`)
Синтаксис	`this.setState(newState[, callback])`	`const [state, setState] = useState(initialState)` hook-у
Бириктирүү/Аналуу	Жаңы абалды учурдагы менен бириктирет (shallow merge)	Жаңы абалды алмаштырат
Асинхрондуулук	Асинхрондуу	Функция жаңыртуу асинхрондуу, иштетилгенде React рендер фазасында болсо, синхрондуу
Мурунку абалга көз каранды	Функцияны `setState`-ке берүү: `this.setState(prevState => ({...}))`	Функцияны жаңыртуу функциясына берүү: `setState(prev => ({...}))`

Reactте компоненттердин абалын туура өзгөртүү жолдору кандай?