Mengapakah useState() Mencetuskan Render Berganda dalam Mod Pembangunan React?

Mengapa useState() Menyebabkan Render Berganda dalam Mod Pembangunan?

Dalam React, menggunakan useState untuk pengurusan negeri boleh mencetuskan dua pemaparan semasa keadaan kemas kini. Tingkah laku ini dikaitkan dengan Mod Ketat React, yang meningkatkan penyahpepijatan pembangunan dengan mensimulasikan potensi kesan sampingan.

Pertimbangkan coretan kod berikut:

import React, { useState } from "react";
...
const [number, setNumber] = useState(0);
...
function changeNumber() {
    setNumber(state => state + 1);
}
...

Apabila mengklik butang yang mencetuskan fungsi changeNumber, anda boleh memerhatikan dua log konsol yang memberi isyarat komponen dipaparkan semula. Ini disebabkan oleh Mod Ketat, yang memaksa fungsi seperti pengemas kini useState untuk melaksanakan dua kali dalam persekitaran pembangunan.

Dokumentasi React menjelaskan bahawa Mod Ketat mengesan dan menyerlahkan kesan sampingan yang berpotensi dengan menggunakan semula fungsi tertentu secara sengaja, termasuk fungsi pengemas kini keadaan seperti yang diluluskan untuk useState. Matlamatnya adalah untuk memudahkan penyahpepijatan dan memastikan tingkah laku yang menentukan.

Untuk mengurangkan pemaparan berganda ini, anda boleh melumpuhkan Mod Ketat dengan mengalih keluar kod berikut daripada titik masuk aplikasi anda:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

Atas ialah kandungan terperinci Mengapakah useState() Mencetuskan Render Berganda dalam Mod Pembangunan React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!