Reatc.js : Mengekalkan Komponen Murni

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 hendaklah 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

Anda boleh memikirkan bahan-bahan anda seperti resipi. Anda tahu bahannya dan jika anda tidak memperkenalkan bahan baharu semasa proses memasak, anda akan mendapat hidangan yang sama setiap kali.

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 Reatc.js : Mengekalkan Komponen Murni. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!