Atkarības useEffect React
Tagad mainīsim krāsu, noklikšķinot uz
pogas. Izveidosim stāvokli color krāsai,
iestatot tam sākotnējo vērtību:
const [color, setColor] = useState('green');
Aizstāsim virknes vērtību ar mūsu stāvokli
useEffect un neaizmirsīsim to pievienot
atkarību sarakstā kvadrātiekavās.
Tagad efekts tiks izpildīts katru
reizi, mainoties stāvoklim color:
function App() {
useEffect(() => {
document.body.style.backgroundColor = color;
}, [color]);
...
}
Tagad pievienosim pogu krāsas maiņai mūsu komponentā:
return (
<div>
<h1>React App</h1>
<button onClick={changeColor}>change</button>
</div>
);
Pievienosim arī klikšķa apstrādātāja funkciju, kas mainīs mūsu krāsu uz oranžu:
function changeColor() {
setColor('orange');
}
Dots stāvoklis ar lietotāja vārdu. Izdariet tā, lai katru reizi, kad mainās vārds, stāvokļa vērtība tiktu ierakstīta pārlūkprogrammas lokālajā krātuvē.
