Milyen szakaszokon mennek keresztül a React komponensek a létrehozástól a DOM-ból való eltávolításig?

A React komponensek több fő életciklus szakaszon mennek keresztül, a létrehozástól a DOM-ból való eltávolításig:

1. Csatlakoztatás (Mounting) — a komponens létrehozása és beszúrása a DOM-ba.

   • Constructor
   • static getDerivedStateFromProps
   • render
   • componentDidMount

2. Frissítés (Updating) — akkor történik, amikor a props vagy a state változik.

   • static getDerivedStateFromProps
   • shouldComponentUpdate
   • render
   • getSnapshotBeforeUpdate
   • componentDidUpdate

3. Leválasztás (Unmounting) — a komponens eltávolítása a DOM-ból.

   • componentWillUnmount

4. Hiba kezelés (Error Handling) — ha hibák lépnek fel az alkomponensekben.

   • static getDerivedStateFromError
   • componentDidCatch

Példa az életciklus metódusok használatára osztálykomponensekben:

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

  componentDidMount() {
    console.log('A komponens csatlakoztatva');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('A komponens frissítve');
  }

  componentWillUnmount() {
    console.log('A komponens eltávolításra kerül');
  }

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

Funkcionális komponensekben hook-okkal hasonló szakaszokat valósítanak meg az useEffect és más hook-ok segítségével.