Kā pareizi mainīt React komponentu stāvokli?

React stāvokļa maiņa notiek, izmantojot setState metodi klases komponentiem vai ar useState hook funkciju komponentiem.

Klasu komponenti:

// Importējam React
import React, { Component } from 'react';

// Izveidojam klases komponentu
class MyComponent extends Component {
  // Sākotnējais stāvoklis
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // Stāvokļa maiņas metode
  incrementCount = () => {
    // Izmantojam `setState`
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Skaitītājs: {this.state.count}</p>
        <button onClick={this.incrementCount}>Palielināt</button>
      </div>
    );
  }
}

// Eksportējam komponentu
export default MyComponent;

• setState ir asinhrons.
• setState apvieno jauno stāvokli ar esošo (shallow merge).
• setState var pieņemt funkciju, kas atgriež jaunu stāvokli, balstoties uz iepriekšējo:

// Metode, kas maina stāvokli ar funkciju
incrementCountFunction = () => {
  this.setState((prevState) => ({
    count: prevState.count + 1
  }));
};

Funkcionālie komponenti (useState):

// Importējam React un useState
import React, { useState } from 'react';

// Izveidojam funkcionālo komponentu
function MyFunctionComponent() {
  // Sākotnējā stāvokļa inicializācija ar `useState`
  const [count, setCount] = useState(0); // [pašreizējais stāvoklis, atjaunināšanas funkcija]

  // Stāvokļa maiņas funkcija
  const incrementCount = () => {
    // Izmantojam atjaunināšanas funkciju
    setCount(count + 1);
  };

  return (
    <div>
      <p>Skaitītājs: {count}</p>
      <button onClick={incrementCount}>Palielināt</button>
    </div>
  );
}

// Eksportējam komponentu
export default MyFunctionComponent;

• useState atgriež masīvu ar diviem elementiem: pašreizējo stāvokli un funkciju to atjaunināšanai.
• useState atjaunināšanas funkcija aizvieto pašreizējo stāvokli, nevis apvieno.
• Ja nepieciešams, var nodot funkciju atjaunināšanas funkcijai, ja jaunais stāvoklis ir atkarīgs no iepriekšējā:

// Funkcija, kas maina stāvokli, izmantojot funkciju
const incrementCountFunction = () => {
  setCount(prevCount => prevCount + 1);
};

Svarīgi punkti:

• Nekopējiet stāvokli tieši: Nekad nepievienojiet jaunu vērtību state īpašībai tieši (piemēram, this.state.count = 5 vai count = 5). React nepamanīs šo izmaiņu un komponenta neperkraus.
• Objektu un masīvu izmaiņas: Izmaiņām objektos vai masīvos stāvoklī, vienmēr izveidojiet jaunas kopijas. React salīdzina atsauces uz objektiem/masīviem, un ja atsauce nemainās, React pieņem, ka dati nemainījās un neizsauc pārrenderi.

// Objekta izmaiņas klases komponentā
this.setState(prevState => ({
  user: {
    ...prevState.user, // Vecās īpašības kopija
    name: 'Jauns vārds' // Nepieciešamās īpašības atjaunināšana
  }
}));

// Masīva izmaiņas funkcionālā komponentā
setItems(prevItems => [...prevItems, 'Jauns elements']); // Pievienojam jaunu elementu

• setState asinhronitāte: Ja vēlaties veikt darbību pēc tam, kad stāvoklis ir atjaunināts un components ir pārrenderēts, izmantojiet otro setState argumentu (callback funkciju) vai useEffect hooku funkcionālajos komponentos.

// Callback `setState`
this.setState({ count: this.state.count + 1 }, () => {
  console.log('Stāvoklis ir atjaunināts!');
});

// `useEffect` reakcijai uz stāvokļa izmaiņām
useEffect(() => {
  console.log('Count mainījās:', count);
}, [count]); // atkarība: `count` izmaiņas aktivizēs hooku

Metožu salīdzinājums:

Īpašība	Klases komponenta (setState)	Funkcionālā komponenta (useState)
Sintakse	this.setState(newState[, callback])	const [state, setState] = useState(initialState) hook
Apvienošana/Nomainīšana	Apvieno jauno stāvokli ar esošo (shallow merge)	Aizvieto esošo stāvokli ar jaunu
Asinhronitāte	Asinhrona	Funkcija atjaunināšana ir asinhrona, ja izsaukta no notikumu apstrādātāja, bet sinhrona React render fāzē
Atkarība no iepriekšējā stāvokļa	Funkciju nodot setState: this.setState(prevState => ({...}))	Funkciju nodot atjaunināšanas funkcijai: setState(prev => ({...}))