Millised elutsükli meetodid on Reactis olemas ja kuidas neid useEffect abil emuleerida?

Reacti klassikomponendis on mitu elutsükli meetodit, millest peamised on:

• componentDidMount — kutsutakse pärast komponendi monteerimist;
• componentDidUpdate — kutsutakse pärast komponendi uuendamist;
• componentWillUnmount — kutsutakse enne komponendi eemaldamist.

Funktsionaalsetes komponentides, kasutades hooki useEffect, saab neid meetodeid emuleerida järgmiselt:

import React, { useEffect } from 'react';

function MyComponent(props) {
  // componentDidMount
  useEffect(() => {
    // kood, mis käivitub üks kord pärast monteerimist
    console.log('Mounted');
  }, []); // tühi sõltuvuste massiiv

  // componentDidUpdate
  useEffect(() => {
    // kood, mis käivitub props või oleku muutmisel
    console.log('Updated');
  }); // ilma teise argumendita — käivitub pärast iga renderdamist

  // componentWillUnmount
  useEffect(() => {
    return () => {
      // puhastuskood enne eemaldamist
      console.log('Unmounted');
    };
  }, []);

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

Seega emuleerib useEffect tühja sõltuvuste massiivi kaudu componentDidMount ja componentWillUnmount (puhastuse funktsiooni kaudu), ning ilma teise argumendita — componentDidUpdate.