Чӣ тавр дуруст ҳолати компонентҳоро дар React тағир…

Промяната на състоянието в React става чрез метода setState за класови компоненти или с помощта на hook-а 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 сравнява референциите към обектите/масивите, и ако референцията не се променя, React предполага, че данните не са се променили и не извиква пререндер.

// Промяна на обект в класов компонент
this.setState(prevState => ({
  user: {
    ...prevState.user, // Копиране на старите свойства
    name: 'Ново име' // Актуализиране на нужната собственост
  }
}));

// Промяна на масив във функционален компонент
setItems(prevItems => [...prevItems, 'Нов елемент']); // Добавяне на нов елемент

Асинхронност на setState: Ако трябва да изпълните действие след като състоянието се обнови и компонентът се пререндерира, използвайте втория аргумент на setState (функция-калбек) или hook-а useEffect във функционалните компоненти.

// Калбек в setState
this.setState({ count: this.state.count + 1 }, () => {
  console.log('Състоянието е обновено!');
});

// useEffect за реакция на промяна на състоянието
useEffect(() => {
  console.log('Промени се състоянието count:', count);
}, [count]); // Зависимост: hook-ът ще се изпълни при промяна на count

Сравнение на методите:

Характеристика	Класов компонент (`setState`)	Функционален компонент (`useState`)
Синтаксис	Метод `this.setState(newState[, callback])`	Hook `const [state, setState] = useState(initialState)`
Обединяване/Замяна	Обединява новото състояние с текущото (shallow merge)	Заменя текущото състояние с ново
Асинхронност	Асинхронен	Функцията за обновяване е асинхронна при извикване от обработчици, но синхронна при извикване в рендер фазата на React
Зависимост от предишното състояние	Предаване на функция към `setState`: `this.setState(prevState => ({...}))`	Предаване на функция към функцията за обновяване: `setState(prev => ({...}))`

Чӣ тавр дуруст ҳолати компонентҳоро дар React тағир додан мумкин аст?