Reageer useEffectHooks


Die useEffectHook laat jou toe om newe-effekte in jou komponente uit te voer.

Enkele voorbeelde van newe-effekte is: die haal van data, die direkte opdatering van die DOM en timers.

useEffectaanvaar twee argumente. Die tweede argument is opsioneel.

useEffect(<function>, <dependency>)


Kom ons gebruik 'n timer as 'n voorbeeld.

Voorbeeld:

Gebruik setTimeout()om 1 sekonde na aanvanklike lewering te tel:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  });

  return <h1>I've rendered {count} times!</h1>;
}

ReactDOM.render(<Timer />, document.getElementById('root'));

Maar wag!! Ek hou aan tel al moet dit net een keer tel!

useEffectloop op elke weergawe. Dit beteken dat wanneer die telling verander, 'n weergawe plaasvind, wat dan 'n ander effek veroorsaak.

Dit is nie wat ons wil hê nie. Daar is verskeie maniere om te beheer wanneer newe-effekte voorkom.

Ons moet altyd die tweede parameter insluit wat 'n skikking aanvaar. Ons kan opsioneel afhanklikhede aan useEffectin hierdie skikking oordra.

1. Geen afhanklikheid geslaag nie:

useEffect(() => {
  //Runs on every render
});

2. 'n Leë skikking:

useEffect(() => {
  //Runs only on the first render
}, []);

3. Rekwisiete of stel waardes:

useEffect(() => {
  //Runs on the first render
  //And any time any dependency value changes
}, [prop, state]);

Dus, om hierdie probleem op te los, laat ons hierdie effek slegs op die aanvanklike weergawe uitvoer.

Voorbeeld:

Voer net die effek uit op die aanvanklike weergawe:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  }, []); // <- add empty brackets here

  return <h1>I've rendered {count} times!</h1>;
}

ReactDOM.render(<Timer />, document.getElementById('root'));

Voorbeeld:

Hier is 'n voorbeeld van 'n useEffectHook wat van 'n veranderlike afhanklik is. As die countveranderlike bywerk, sal die effek weer loop:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function Counter() {
  const [count, setCount] = useState(0);
  const [calculation, setCalculation] = useState(0);

  useEffect(() => {
    setCalculation(() => count * 2);
  }, [count]); // <- add the count variable here

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>+</button>
      <p>Calculation: {calculation}</p>
    </>
  );
}

ReactDOM.render(<Counter />, document.getElementById('root'));

As daar veelvuldige afhanklikhede is, moet hulle by die useEffectafhanklikheidskikking ingesluit word.


w3schools CERTIFIED . 2022

Word gesertifiseer!

Voltooi die React-modules, doen die oefeninge, neem die eksamen en word w3schools-gesertifiseer!!

$ 95 INSKRYF

Effek skoonmaak

Sommige effekte vereis opruiming om geheuelekkasies te verminder.

Time-outs, intekeninge, gebeurtenisluisteraars en ander effekte wat nie meer nodig is nie, moet verwyder word.

Ons doen dit deur 'n terugkeerfunksie aan die einde van die useEffectHook in te sluit.

Voorbeeld:

Maak die timer aan die einde van die useEffecthaak skoon:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    let timer = setTimeout(() => {
    setCount((count) => count + 1);
  }, 1000);

  return () => clearTimeout(timer)
  }, []);

  return <h1>I've rendered {count} times!</h1>;
}

ReactDOM.render(<Timer />, document.getElementById("root"));

Let wel: Om die tydteller skoon te maak, moes ons dit 'n naam gee.


Toets jouself met oefeninge

Oefening:

Wat moet jy by die tweede argument van 'n useEffectHook voeg om dit te beperk tot slegs die eerste weergawe?

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    setData(getData())
  }, );

  return <DisplayData data={data} />;
}

ReactDOM.render(<App />, document.getElementById('root'));