React-də hansı həyat dövrü metodları mövcuddur və onları useEffect ilə necə təqlid etmək olar?

React sinif komponentində həyat dövrü metodları mövcuddur və onların əsasları aşağıdakılardır:

• componentDidMount — komponent montaj edildikdən sonra çağırılır;
• componentDidUpdate — komponent yeniləndikdən sonra çağırılır;
• componentWillUnmount — komponent unmontaj edilmədən əvvəl çağırılır.

Funksional komponentlərdə useEffect hook ilə bu metodlar aşağıdakı kimi emulyasiya oluna bilər:

import React, { useEffect } from 'react';

function MyComponent(props) {
  // componentDidMount
  useEffect(() => {
    // montajdan sonra bir dəfə işləyəcək kod
    console.log('Mounted');
  }, []); // boş asılılıq array-ı

  // componentDidUpdate
  useEffect(() => {
    // props və ya vəziyyət dəyişdikdə işləyəcək kod
    console.log('Updated');
  }); // ikinci arqument olmadan — hər renderdən sonra çağırılır

  // componentWillUnmount
  useEffect(() => {
    return () => {
      // təmizləmə kodu unmontajdan əvvəl
      console.log('Unmounted');
    };
  }, []);

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

Beləliklə, useEffect boş asılılıq array-ı ilə componentDidMount və componentWillUnmount-u (təmizləmə funksiyası vasitəsilə) emulyasiya edir, və useEffect ikinci arqument olmadan — componentDidUpdate-u təmsil edir.