Кадом методҳои давраи ҳаёт дар 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 бо массиви холӣ аз вобастагиҳо emulate мекунад componentDidMount ва componentWillUnmount (бо истифода аз функсияи тоза), ва useEffect бе дуввум аргумент — componentDidUpdate.