Reactda useEffectda Bog'liqliklar

Endi tugma bosilganda rangni o'zgartiramiz. Rang uchun color holatini yaratamiz, unga boshlang'ich qiymat berib:

App.jsxconst [color, setColor] = useState('green');

useEffect ichidagi qator qiymatini holatimizga almashtiramiz va uni kvadrat qavs ichidagi bog'liqliklar ro'yxatiga qo'shishni unutmaymiz. Endi effekt color holati o'zgarganda har safar bajariladi:

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

Keling, endi komponentimizga rangni o'zgartirish tugmasini qo'shamiz:

App.jsxreturn (
  <div>
    <h1>React App</h1>
    <button onClick={changeColor}>change</button>
  </div>
);

Bundan tashqari, rangni olovrangga o'zgartiruvchi klik ishlovchisi funksiyasini qo'shamiz:

App.jsxfunction changeColor() {
  setColor('orange');
}