Вобастагиҳо дар useEffect дар React
Акнун биёед рангро бо клик кардан
тугма иваз кунем. Як стейти <color> барои ранг созем,
ки ба он арзиши ибтидоӣ диҳем:
const [color, setColor] = useState('green');
Арзиши сатриро бо стейти мо дар
<useEffect> иваз мекунем
ва фаромӯш намекунем, ки онро
ба рӯйхати вобастагиҳо дар қафаси квадратӣ илова кунем.
Акнун таъсир ҳар дафъа дар ҳолати тағйирёбии стейти <color> иҷро мешавад:
function App() {
useEffect(() => {
document.body.style.backgroundColor = color;
}, [color]);
...
}
Биёед акнун як тугма барои иваз кардани ранг ба компоненти мо илова кунем:
return (
<div>
<h1>React App</h1>
<button onClick={changeColor}>change</button>
</div>
);
Функсияи коркарди кликро низ илова мекунем, ки ранги моро ба норанҷӣ иваз мекунад:
function changeColor() {
setColor('orange');
}
Стейт бо номи корбар дода шудааст. Чунки ҳар дафъа ном тағйир ёбад, арзиши стейт ба анбори маҳаллии браузер сабт карда шавад.