React'те useEffect'те көз карандылыктар

Эми баскычты басуу менен түстү өзгөртөлү. Түс үчүн color стейтин түзөбүз, ага баштапкы маанини берүү менен:

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

useEffect'теги саптук маанини биздин стейт менен алмаштырабыз жана аны чарчы кашаадагы көз карандылыктар тизмесине кошуганды унутпайбыз. Эми эффект ар бир жолу color стейти өзгөргөндө аткарылат:

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

  ...
}

Эми компонентибизге түстү өзгөртүү үчүн баскыч кошолу:

App.jsxreturn (
  <div>
    <h1>React App</h1>
    <button onClick={changeColor}>өзгөртүү</button>
  </div>
);

Ошондой эле чыкылдатууну иштетүүчү функцияны кошобуз, ал биздин түстү кызгылт сарыга өзгөртөт:

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