Ինչպես ճիշտ փոխել 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-ը համեմատում է հղումները օբյեկտների/զանգվածների վրա, և եթե հղումը չի փոխվել, React-ը ենթադրում է, որ տվյալները չեն փոխվել և չի կանչում վերաարտադրություն:

// Օբյեկտի փոփոխություն դասական կոմպոնենտում
this.setState(prevState => ({
  user: {
    ...prevState.user, // Հին հատկությունների պատճեն
    name: 'Նոր անուն' // Պահանջվող հատկության թարմացում
  }
}));

// Զանգվածի փոփոխություն ֆունկցիոնալ կոմպոնենտում
setItems(prevItems => [...prevItems, 'Նոր տարր']); // Նոր տարր ավելացնել

• setState-ի ասինխրոնությունը: Եթե ուզում եք կատարել գործողություն այն ժամանակ, երբ վիճակը թարմացվի և կոմպոնենտը վերաարտադրվի, օգտագործեք երկրորդ արգումենտը setState-ի (callback ֆունկցիա) կամ hook useEffect-ը ֆունկցիոնալ կոմպոնենտներում:

// Callback-ով `setState`
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)	Նորից է փոխարինում ընթացիկ վիճակը
Ասինխրոնություն	Ասինխրոն է	Ֆունկցիայի թարմացումը ասինխրոն է՝ իրադարձությունների handler-ներից, բայց սինխրոն՝ React-ի render-ֆազում
Զависимость նախորդ վիճակից	Ֆունկցիա փոխանցել setState-ին՝ this.setState(prevState => ({...}))	Ֆունկցիա փոխանցել թարմացման ֆունկցիային՝ setState(prev => ({...}))