StrictMode tidak menjadikan sebarang kandungan visual dalam React, tetapi ia sangat berguna semasa pembangunan. Fungsi utamanya adalah untuk membantu pemaju mengenal pasti masalah yang berpotensi, terutama yang boleh menyebabkan pepijat atau tingkah laku yang tidak dijangka dalam aplikasi yang kompleks. Khususnya, ia bendera kaedah kitaran hayat yang tidak selamat, mengiktiraf kesan sampingan dalam fungsi membuat, dan memberi amaran tentang penggunaan API ref rentetan lama. Di samping itu, ia boleh mendedahkan kesan sampingan ini dengan sengaja mengulangi panggilan ke fungsi tertentu, dengan itu mendorong pemaju untuk memindahkan operasi yang berkaitan ke lokasi yang sesuai, seperti cangkuk useeffect. Pada masa yang sama, ia menggalakkan penggunaan kaedah ref yang lebih baru seperti useref atau callback ref dan bukannya String Ref. Untuk menggunakan StrictMode dengan berkesan, disyorkan untuk membungkus bahagian tertentu kod dalam persekitaran pembangunan, tambahkannya apabila melangkah atau refactoring kod lama, dan membolehkannya dari awal projek baru.

Komponen StrictMode dalam React tidak memberikan apa -apa secara visual, tetapi ia sangat berguna semasa pembangunan. Tugas utamanya adalah untuk membantu anda menangkap masalah yang berpotensi dalam kod anda - terutamanya yang mungkin membawa kepada pepijat atau tingkah laku yang tidak dijangka dalam aplikasi yang lebih kompleks.

Inilah cara ia membantu dalam istilah praktikal:

Sorotan kaedah kitaran hayat yang tidak selamat

React telah berkembang dari masa ke masa, dan beberapa kaedah kitaran hayat yang lebih lama telah ditandakan sebagai tidak selamat kerana mereka boleh menyebabkan masalah dengan ciri -ciri baru seperti mod serentak. Jika anda menggunakan mana -mana kaedah yang tidak ditetapkan (seperti componentWillMount , componentWillReceiveProps , atau componentWillUpdate ), membungkus komponen anda di <strictmode></strictmode> akan memberi amaran kepada anda tentang mereka di konsol.

Ini berguna jika:

• Anda mengekalkan pangkalan data yang lebih lama
• Anda menaik taraf dari React 16 ke versi yang lebih baru
• Anda belajar dan ingin mengelakkan corak ketinggalan zaman

Ia tidak memecahkan aplikasi anda - ia hanya menjejaskan anda ke arah amalan yang lebih baik.

Mengenal pasti kesan sampingan dalam fungsi membuat

Meletakkan logik dengan kesan sampingan (seperti pengambilan data, langganan, atau mengubahsuai DOM secara manual) terus ke dalam kaedah render atau badan fungsi boleh menyebabkan masalah. <strictmode></strictmode> sengaja menggandakan fungsi tertentu (seperti pembina kelas, fungsi membuat, dan beberapa kaedah kitaran hayat) untuk menjadikan kesan sampingan ini lebih mudah untuk ditemui.

Contohnya:

• Sekiranya anda mengambil data di dalam fungsi render tanpa memeriksa sama ada ia sudah diambil, anda mungkin mencetuskan permintaan yang tidak perlu.
• Jika anda menyediakan langganan (seperti pendengar acara) secara langsung, anda boleh berakhir dengan pendengar pendua.

Dengan menandakan corak ini lebih awal, <strictmode></strictmode> menggalakkan anda untuk memindahkan operasi tersebut ke dalam cangkuk kitaran hayat yang betul atau cangkuk seperti useEffect .

Memberi amaran mengenai penggunaan API ref Legacy String

Menggunakan String Refs ( ref="myRef" ) adalah perkara biasa dalam versi yang lebih lama daripada React, tetapi kini dianggap sebagai corak warisan. <strictmode></strictmode> akan memberi amaran kepada anda jika anda masih menggunakan gaya ini, menggalakkan anda beralih ke Callback Refs atau cangkuk useRef yang lebih baru.

Daripada melakukan ini:

 Kelas MyComponent memanjangkan React.component {
  render () {
    kembali <div ref = "mydiv" />;
  }
}

Anda harus melakukan ini (dalam komponen berfungsi):

 fungsi myComponent () {
  const myDivref = useref ();
  kembali <div ref = {myDivref} />;
}

Cara menggunakannya dengan berkesan

• Balut hanya bahagian khusus pembangunan aplikasi anda-ia tidak mempunyai kesan dalam bangunan pengeluaran.
• Tambahkan secara beransur -ansur semasa anda menaik taraf atau kod lama reflektor.
• Jangan keluarkannya hanya kerana ia menunjukkan amaran - menetapkan punca akar sebaliknya.
• Gunakannya dalam projek baru dari hari pertama untuk mengelakkan tabiat buruk.

Singkatnya, <strictmode></strictmode> tidak diperlukan, tetapi ia adalah alat yang kuat untuk menulis kod reaksi yang lebih selamat, masa depan. Ia tidak akan menghentikan aplikasi anda daripada bekerja, tetapi ia akan membantu anda mengelakkan perangkap yang sukar untuk debug kemudian.

Pada asasnya, ia seperti mempunyai linter mesra yang dibina terus ke dalam kerangka UI anda - dan itu cukup berguna.

Atas ialah kandungan terperinci Apakah kepentingan komponen StrictMode dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!