Kādas posmos pārdzīvo React komponenti no to izveides līdz to izņemšanai no DOM?

React komponenti pāriet caur vairākām galvenajām dzīves cikla posmām, sākot no izveides līdz izņemšanai no DOM:

1. Montēšana (Mounting) — komponenta izveide un ievietošana DOM.

   • Constructor
   • static getDerivedStateFromProps
   • render
   • componentDidMount

2. Atjaunināšana (Updating) — notiek, mainoties props vai stāvoklim.

   • static getDerivedStateFromProps
   • shouldComponentUpdate
   • render
   • getSnapshotBeforeUpdate
   • componentDidUpdate

3. Noņemšana (Unmounting) — komponenta noņemšana no DOM.

   • componentWillUnmount

4. Kļūdu apstrāde (Error Handling) — gadījumā, ja rodas kļūdas bērnu komponentos.

   • static getDerivedStateFromError
   • componentDidCatch

Piemērs, kā izmantot dzīves cikla metodes klases komponentā:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('Komponents ir uzstādīts');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Komponents ir atjaunināts');
  }

  componentWillUnmount() {
    console.log('Komponents tiks noņemts');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

Funkcionālajās komponentēs ar hookiem līdzīgi posmi tiek īstenoti caur useEffect un citām hook funkcijām.