Reactda qanday hayot aylanishi usullari mavjud va ularni useEffect yordamida qanday emulyatsiya qilish mumkin?

React sinf klass komponentida hayot tsikli metodlari mavjud bo'lib, ularning asosiylari:

• componentDidMount — komponent montaj qilinib bo'lgach chaqiriladi;
• componentDidUpdate — komponent yangilanganidan so'ng chaqiriladi;
• componentWillUnmount — komponent o'chirilishidan oldin chaqiriladi.

Funktsional komponentlarda useEffect hook bilan bu metodlarni quyidagicha emulyatsiya qilish mumkin:

import React, { useEffect } from 'react';

function MyComponent(props) {
  // componentDidMount
  useEffect(() => {
    // montajdan so'ng bir marta bajariladigan kod
    console.log('Mounted');
  }, []); // bo'sh bog'liqliklar massivi

  // componentDidUpdate
  useEffect(() => {
    // props yoki holat o'zgarganda bajariladigan kod
    console.log('Updated');
  }); // ikkinchi argumentsiz — har renderdan so'ng chaqiriladi

  // componentWillUnmount
  useEffect(() => {
    return () => {
      // tozalash kodi o'chirilishdan oldin
      console.log('Unmounted');
    };
  }, []);

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

Shunday qilib, useEffect bo'sh bog'liqliklar massivi bilan componentDidMount va componentWillUnmount (tozalash funksiyasi orqali) emulyatsiya qiladi, va useEffect ikkinchi argumentsiz — componentDidUpdate ni ifodalaydi.