Reageer useEffect
Hooks
Die useEffect
Hook 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.
useEffect
aanvaar 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!
useEffect
loop 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 useEffect
in 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 useEffect
Hook wat van 'n veranderlike afhanklik is. As die count
veranderlike 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 useEffect
afhanklikheidskikking ingesluit word.
Word 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 useEffect
Hook in te sluit.
Voorbeeld:
Maak die timer aan die einde van die useEffect
haak 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.