Kebergantungan dalam useEffect dalam React

Sekarang mari kita ubah warna dengan mengklik tompok. Mari wujudkan keadaan color untuk warna, dengan menetapkan nilai permulaan:

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

Gantikan nilai rentetan dengan keadaan kita dalam useEffect dan jangan lupa untuk menambahkannya ke dalam senarai kebergantungan dalam kurungan segi empat. Sekarang kesan akan dilaksanakan setiap kali keadaan color berubah:

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

Sekarang mari kita tambah tombol untuk menukar warna dalam komponen kita:

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

Mari juga tambah fungsi pengendali klik, yang akan menukar warna kita kepada oren:

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