eact Trik untuk Meningkatkan Kualiti dan Prestasi Kod

React ialah perpustakaan JavaScript yang berkuasa untuk membina antara muka pengguna dan dengan hanya beberapa helah, anda boleh menulis kod yang lebih bersih, cekap dan boleh diselenggara. Dalam artikel ini, kami akan meneroka lima helah React penting yang akan membantu anda menulis kod yang lebih berprestasi dan boleh dibaca.

---

1. Gunakan Operator Ternary Daripada Operator AND (&&) untuk Memaparkan Elemen

Dalam React, adalah perkara biasa untuk menghasilkan komponen atau elemen secara bersyarat berdasarkan syarat tertentu. Walau bagaimanapun, menggunakan operator && untuk pemaparan bersyarat boleh menjadi rumit apabila ungkapan yang dinilai menghasilkan nilai palsu (mis., palsu, nol, tidak ditentukan, 0 atau ''). Untuk mengelakkan tingkah laku pemaparan yang tidak diingini, lebih suka menggunakan operator ternary.

Contoh && Tingkah Laku:

Menggunakan && dalam pemaparan bersyarat:

{0 && <h1 id="Hello-world">Hello world 5</h1>}
{0 ? <h1 id="Hello-world">Hello world 6</h1> : null}

• Contoh pertama ({0 &&

  Hello world 5

  }) akan menjadikan 0 dalam UI kerana 0 ialah nilai palsu dalam JavaScript dan React akan mentafsirkannya sebagai palsu. Walau bagaimanapun, daripada tidak memberikan apa-apa, React akan memaparkan nilai palsu (0) itu sendiri.

• Contoh kedua ({0 ?

  Hello world 6

  : null}) akan memaparkan tiada apa-apa. Memandangkan syaratnya ialah 0 (yang palsu), pengendali ternary akan menilai kepada null dan React tidak akan menghasilkan apa-apa.

Pendekatan Lebih Baik dengan Operator Ternary:

Daripada bergantung pada operator &&, anda boleh menggunakan operator ternary untuk memastikan anda memaparkan kandungan sandaran yang betul, terutamanya apabila syaratnya palsu.

{0 ? <h1 id="Hello-world">Hello world 5</h1> : null}

Dalam kes ini, jika syaratnya palsu (0), React akan menjadikan batal, yang mengakibatkan tiada apa-apa yang diberikan, memberikan gelagat yang lebih boleh diramal dan dimaksudkan.

---

2. Lazy Initializer dengan useState

Kait useState React boleh mengambil fungsi sebagai nilai awalnya, membolehkan anda dengan malas memulakan keadaan. Ini amat berguna apabila keadaan awal mahal untuk dikira atau apabila ia bergantung pada beberapa pengiraan yang sepatutnya dijalankan sekali sahaja.

Mengapa Gunakan Permulaan Malas?

• Peningkatan Prestasi: Jika keadaan awal melibatkan pengiraan yang mahal atau pengambilan data, permulaan malas membantu menangguhkan kos tersebut sehingga ia benar-benar diperlukan.
• Elakkan Pengiraan yang Tidak Diperlukan: Fungsi yang anda berikan kepada useState sebagai nilai awal hanya akan dilaksanakan sekali semasa pemasangan komponen dan ia tidak akan dikira semula semasa pemaparan berikutnya.

Contoh:

{0 && <h1 id="Hello-world">Hello world 5</h1>}
{0 ? <h1 id="Hello-world">Hello world 6</h1> : null}

Dalam contoh ini:

• useState(() => Math.random()) akan memanggil fungsi sekali sahaja, pada pemaparan awal.
• Ini memastikan penjanaan nombor rawak hanya berlaku sekali, meningkatkan prestasi jika pengiraan mahal.

---

3. Gunakan Komponen Lazy Load untuk Meningkatkan Prestasi

React.lazy() dan Suspense React ialah alat yang hebat untuk memuatkan komponen malas, yang membantu memisahkan JavaScript anda kepada berkas yang lebih kecil dan memuatkannya hanya apabila diperlukan. Ini mengurangkan masa muat awal dengan ketara dan meningkatkan prestasi apl anda.

Contoh:

{0 ? <h1 id="Hello-world">Hello world 5</h1> : null}

Dalam contoh ini:

• React.lazy() membolehkan anda mengimport LazyComponent secara dinamik.
• Komponen Suspense digunakan untuk memaparkan keadaan pemuatan sehingga komponen yang dimuatkan malas dipaparkan sepenuhnya.

Dengan menggunakan pemuatan malas, apl anda hanya akan memuatkan komponen yang diperlukan untuk pemaparan awal dan mengambil yang lain atas permintaan, meningkatkan prestasi, terutamanya dalam aplikasi yang besar.

---

4. Menggunakan Rantaian Pilihan dalam JavaScript

Jika anda menggunakan JavaScript, rantaian pilihan (?.) ialah penyelamat apabila mengakses sifat bersarang dalam pada objek. Ia menghalang ralat yang berlaku semasa cuba mengakses sifat yang tidak ditentukan atau null. Rantaian pilihan tersedia dalam JavaScript moden dan membolehkan anda mengakses sifat dengan selamat tanpa perlu menyemak secara manual sama ada null atau undefined.

Contoh:

import React, { useState } from 'react';

const ExpensiveComponent: React.FC = () => {
  const [count, setCount] = useState(() => {
    // Expensive computation
    console.log('Computing initial state');
    return Math.random(); // For example, generate a random number
  });

  return <div>Initial Random Value: {count}</div>;
};

export default ExpensiveComponent;

Dalam contoh ini:

• data?.info?.address mengakses sifat alamat dengan selamat tanpa membuang ralat jika data atau maklumat tidak ditentukan atau batal.
• The ?? operator menyediakan nilai lalai jika alamat tidak ditentukan.

Tanpa rantaian pilihan, anda perlu menyemak setiap peringkat secara manual, yang boleh membawa kepada kod yang bersepah dan sukar dibaca dengan cepat. Rantaian pilihan memastikan ia bersih dan bebas ralat.

---

5. Gunakan useRef untuk Borang untuk Mengelakkan Re-render

Dalam React, apabila bekerja dengan borang dan anda tidak memerlukan komponen untuk memaparkan semula pada setiap perubahan input, lebih baik menggunakan useRef daripada useState. useRef menyimpan nilai medan input secara langsung dan tidak mencetuskan pemaparan semula apabila nilai berubah, menjadikannya lebih berprestasi untuk bentuk besar.

Contoh:

{0 && <h1 id="Hello-world">Hello world 5</h1>}
{0 ? <h1 id="Hello-world">Hello world 6</h1> : null}

Dalam contoh TypeScript ini:

• useRef digunakan untuk menjejaki nilai input tanpa menyebabkan komponen dipaparkan semula pada setiap perubahan input.
• nameRef.current digunakan untuk mengakses terus nilai input apabila borang diserahkan.

Menggunakan useRef amat berguna apabila nilai borang tidak perlu mencetuskan pemaparan semula untuk pengesahan atau kemas kini dinamik, menjadikannya pilihan terbaik untuk borang sensitif prestasi.

---

Kesimpulan

Dengan menggunakan lima helah React ini dalam kod anda, anda boleh meningkatkan prestasi, kebolehbacaan dan kebolehselenggaraan dengan ketara. Berikut ialah imbasan ringkas:

1. Gunakan operator ternary untuk pemaparan bersyarat dan bukannya &&.
2. Manfaatkan pemulaan malas dalam useState.
3. Laksanakan pemuatan malas untuk komponen untuk meningkatkan masa pemuatan awal.
4. Gunakan rantaian pilihan untuk akses harta yang lebih selamat dalam JavaScript.
5. Gunakan useRef dalam borang untuk mengelakkan pemaparan semula yang tidak perlu.

Dengan teknik ini, aplikasi React anda akan menjadi lebih cekap dan lebih mudah diselenggara, membawa kepada pengalaman pengguna yang lebih baik dan pembangunan yang lebih lancar. Selamat mengekod!

Atas ialah kandungan terperinci eact Trik untuk Meningkatkan Kualiti dan Prestasi Kod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!