Rumah  >  Artikel  >  hujung hadapan web  >  Bertindak balas : Mengekalkan Komponen Tulen

Bertindak balas : Mengekalkan Komponen Tulen

DDD
DDDasal
2024-10-22 06:22:03565semak imbas

React : Keeping Components Pure

Jika anda menyukai artikel itu, anda boleh membeli kopi untuk menyokong Beli saya kopi


Menjaga Kesucian Komponen

Sesetengah fungsi JavaScript harus tulen. Fungsi tulen hanya melakukan pengiraan dan tiada yang lain. Dengan menulis komponen anda sebagai fungsi tulen, anda boleh mengelakkan semua ralat yang mengelirukan dan tingkah laku yang tidak dapat diramalkan apabila asas kod anda berkembang. Anda boleh menjadikan komponen anda mudah diurus.


Kesucian

Jadi bagaimana kita boleh mencipta fungsi tulen? Dan apakah ciri-ciri yang perlu ada pada sesuatu fungsi untuk menjadi tulen? Fungsi tulen mestilah fungsi yang mempunyai ciri-ciri berikut :

  • Ia mengambil berat urusannya sendiri. Ia tidak mengubah sebarang objek atau pembolehubah yang wujud sebelum ia dipanggil.

  • Input yang sama, output yang sama. Memandangkan input yang sama, fungsi tulen harus sentiasa mengembalikan hasil yang sama. Ia tidak sepatutnya memberikan hasil yang berbeza kepada input yang sama.

Mari kita pertimbangkan formula matematik : y = 2x

Jika x = 2, y = 4. Invarian ini sentiasa hasil yang sama.

Jika x = 3, y = 6. Invarian ini sentiasa hasil yang sama.

Jika x = 3, kadangkala y tidak akan menjadi 9, –1 atau 2.5, bergantung pada beberapa situasi lain.

Jika y = 2x dan x = 3 maka y akan sentiasa 6.

Jika kami menjadikannya fungsi JavaScript :

function getDouble(number) {
  return 2 * number;
}

getDouble ialah fungsi tulen. Jika anda melepasi 3, ia akan kembali 6. Sentiasa.

React dibina berdasarkan konsep ini. Ia menganggap bahawa setiap komponen berkelakuan seperti fungsi tulen, bermakna Komponen React anda harus sentiasa mengembalikan output JSX yang sama dengan input yang sama.

Mari kita terangkan sebatian tulen dengan memberikan contoh.

function Member({ user }) {
  return (
    <ol>    
      <li> register {user} </li>
    </ol>
  );
}

export default function App() {
  return (
    <section>
      <Member user={2} />
      <Member user={4} />
    </section>
  );
}

Ia sentiasa mengembalikan apa sahaja parameter pengguna yang diberikan.seperti formula matematik


Kesimpulan

Sesuatu komponen mestilah tulen, bermaksud:

Ia mengambil berat urusannya sendiri. Ia tidak sepatutnya mengubah sebarang objek atau pembolehubah yang wujud sebelum pemaparan.

Input yang sama, output yang sama. Memandangkan input yang sama, komponen harus sentiasa mengembalikan JSX yang sama.

Atas ialah kandungan terperinci Bertindak balas : Mengekalkan Komponen Tulen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn