Effekthooken useEffect i React

För att arbeta med effekter används hooken useEffect. Låt oss titta på hur den fungerar.

Låt oss först importera vår hook:

App.jsximport { useEffect } from 'react';

Låt oss skapa en komponent App som innehåller en rubrik:

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

export default App;

Antag att vi behöver utföra någon åtgärd efter rendering, till exempel ställa in bakgrundsfärgen på hela sidan. I det här fallet kommer det externa systemet att vara webbläsarens DOM.

Låt oss använda vår hook:

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

I den andra parametern skickas en array med beroenden. Den innehåller värden som används av funktionerna i komponenten. För nu har vi lämnat den tom. I det här fallet kommer färgen att ställas in på grön endast en gång efter rendering. Du kan inte helt ta bort den andra parametern, eftersom din komponent då kan hamna i en oändlig loop.