Ի՞նչ կյանքային ցիկլի մեթոդներ կան React-ում և ինչպես նրանց էմուլացնել useEffect-ով։

React դասական կոմպոնենտում կան մի քանի կյանքի ցիկլի մեթոդներ, որոնցից հիմնականներն են՝

• componentDidMount — կոչվում է կոմպոնենտի մոնտաժից հետո;
• componentDidUpdate — կոչվում է կոմպոնենտի թարմացումից հետո;
• componentWillUnmount — կոչվում է կոմպոնենտի անջատումից առաջ:

Ֆունկցիոնալ կոմպոնենտներում hook useEffect-ով այս մեթոդները կարելի է էմուլացնել հետևյալ կերպ՝

import React, { useEffect } from 'react';

function MyComponent(props) {
  // componentDidMount
  useEffect(() => {
    // կոդ, որը կատարվում է մեկ անգամ մոնտաժից հետո
    console.log('Mounted');
  }, []); // դատարկ կախվածությունների զանգված

  // componentDidUpdate
  useEffect(() => {
    // կոդ, որը կատարվում է props կամ վիճակի փոփոխության դեպքում
    console.log('Updated');
  }); // առանց երկրորդ արգումենտի — կատարվում է յուրաքանչյուր ռենդերի հետո

  // componentWillUnmount
  useEffect(() => {
    return () => {
      // մաքրման կոդը նախքան անջատումը
      console.log('Unmounted');
    };
  }, []);

  return <div>{props.value}</div>;
}

Այսպիսով, useEffect-ը դատարկ կախվածությունների զանգվածով էմուլացնում է componentDidMount և componentWillUnmount (մաքրման ֆունկցիայի միջոցով), իսկ useEffect առանց երկրորդ արգումենտի — componentDidUpdate-ն է։