Effekt hook useEffect i React

Til arbejde med effekter anvendes hook useEffect. Lad os se på dens funktion.

Til at starte med importerer vi vores hook:

App.jsximport { useEffect } from 'react';

Lad os oprette en komponent App, der indeholder en overskrift:

App.jsxfunction App() {
  return (
    <div>
      <h1>React App</h1>
    </div>
  );
}

export default App;

Antag, at vi skal udføre en handling efter rendering, for eksempel indstille baggrundsfarven på hele siden. I dette tilfælde vil det eksterne system være DOM i browseren.

Lad os anvende vores hook:

App.jsxfunction App() {
  useEffect(() => {
    document.body.style.backgroundColor = 'green';
  }, []);
  
  ...
}

I den anden parameter sendes en matrix af afhængigheder. Disse inkluderer værdier, der bruges af funktionerne i komponenten. For nu har vi ladet den være tom. I dette tilfælde vil farven kun blive indstillet til grøn én gang efter rendering. Du kan ikke fjerne den anden parameter helt, da din komponent kan gå i en uendelig løkke.