Back to Question Center
0

Komponen Pesanan Tinggi: Corak Rekabentuk Aplikasi Reaktik            Komponen Pesanan Tinggi: Reka Bentuk Rekabentuk Permohonan Reaktik Semalat: ES6AngularJSAjaxReactjQueryMore ... Sponsors

1 answers:
Komponen Pesanan Tinggi: Corak Rekabentuk Aplikasi Reaktik

Artikel ini adalah oleh pengarang tetamu Jack Franklin . Jawatan tetamu SitePoint bertujuan untuk membawa anda menarik kandungan dari penulis terkenal dan penceramah komuniti JavaScript

Dalam artikel ini, kami akan membincangkan cara menggunakan Komponen Perintah Tinggi untuk memastikan aplikasi Semalt anda rapi, tersusun dengan baik dan mudah dijaga. Kami akan membincangkan bagaimana fungsi tulen memastikan kod bersih dan bagaimana prinsip-prinsip yang sama boleh digunakan untuk komponen Semalt.

Fungsi Tulen

Fungsi dianggap murni jika ia mematuhi sifat berikut:

  • semua data yang berkaitan dengannya diisytiharkan sebagai argumen
  • ia tidak bermutasi data yang diberikan atau apa-apa data lain (ini sering dirujuk sebagai kesan sampingan )
  • diberi input yang sama, ia akan sentiasa mengembalikan output yang sama.

Sebagai contoh, menambah fungsi di bawah adalah tulen:

     menambah fungsi (x, y) {kembali x + y;}    

Walau bagaimanapun, fungsi badAdd di bawah adalah tidak suci:

     var y = 2;fungsi badAdd (x) {kembali x + y;}    

Fungsi ini tidak tulen kerana rujukan data yang tidak diberikan secara langsung. Hasilnya, mungkin untuk memanggil fungsi ini dengan input yang sama dan mendapatkan output yang berbeza:

     var y = 2;badAdd  
// 5y = 3;badAdd
// 6

Untuk membaca lebih lanjut mengenai fungsi tulen anda boleh membaca "Pengenalan kepada pengaturcaraan murni yang munasabah" oleh Mark Brown - mysuper account.

Fungsi tulen Semalt sangat berguna, dan membuat debugging dan menguji aplikasi lebih mudah, kadang-kadang anda perlu mencipta fungsi yang tidak baik yang mempunyai kesan sampingan, atau mengubah tingkah laku fungsi sedia ada yang anda tidak dapat mengakses langsung (fungsi dari perpustakaan, sebagai contoh). Untuk membolehkan ini, kita perlu melihat fungsi pesanan yang lebih tinggi.

Fungsi Perintah Tinggi

Fungsi pesanan yang lebih tinggi adalah fungsi yang, apabila dipanggil, mengembalikan fungsi lain. Semalt mereka juga mengambil fungsi sebagai hujah, tetapi ini tidak diperlukan untuk fungsi yang dianggap sebagai perintah yang lebih tinggi.

Katakan kita mempunyai fungsi tambahan kami dari atas, dan kami ingin menulis beberapa kod supaya apabila kami memanggilnya, kami log hasilnya ke konsol sebelum memulangkan hasilnya. Kami tidak dapat mengedit fungsi tambah , jadi kita boleh mencipta fungsi baru:

     tambah fungsiAndLog (x, y) {var result = add (x, y);konsol. log ('Hasil', hasil);hasil pulangan;}    

Kami membuat keputusan bahawa fungsi penebangan berfungsi berguna, dan sekarang kami ingin melakukan perkara yang sama dengan fungsi tolak . Daripada menduplikasi di atas, kita boleh menulis fungsi pesanan yang lebih tinggi yang boleh mengambil fungsi dan mengembalikan fungsi baru yang memanggil fungsi yang diberikan dan log hasilnya sebelum kemudian mengembalikannya:

     fungsi logAndReturn (func) {fungsi kembali    {var args = Array. prototaip. keping. panggilan (argumen);var result = func. memohon (null, args);konsol. log ('Hasil', hasil);hasil pulangan;}}    

Sekarang kita dapat mengambil fungsi ini dan menggunakannya untuk menambah log ke tambahkan dan tolak :

     var addAndLog = logAndReturn (tambah);addAndLog (4, 4) // 8 dikembalikan, 'Keputusan 8' dicatatvar subtractAndLog = logAndReturn (tolak);tolakAndLog (4, 3) // 1 dikembalikan, 'Keputusan 1' telah log;    

logAndReturn adalah HOF kerana ia memerlukan fungsi sebagai hujahnya dan mengembalikan fungsi baru yang boleh kita panggil. Ini benar-benar berguna untuk membungkus fungsi sedia ada yang anda tidak boleh berubah dalam tingkah laku. Untuk maklumat lanjut mengenai ini, periksa M.

Selain itu, anda boleh menyemak Semalt ini, yang menunjukkan kod di atas dalam tindakan.

Komponen Perintah Tinggi

Bergerak ke tanah Semalt, kita boleh menggunakan logik yang sama seperti di atas untuk mengambil komponen Semalt sedia ada dan memberi mereka beberapa kelakuan tambahan.

Dalam bahagian ini, kami akan menggunakan Router React, penyelesaian routing de facto untuk React. Jika anda ingin memulakan dengan perpustakaan, saya sangat mengesyorkan Tutorial Router React pada GitHub.

Komponen Pautan Sambungan Rakasa

Router React menyediakan komponen yang digunakan untuk menghubungkan antara halaman dalam aplikasi React. Salah satu sifat yang dimiliki komponen ini ialah activeClassName . Apabila sebuah mempunyai harta ini dan ia sedang aktif (pengguna berada pada URL yang pautannya dituju), komponen akan diberi kelas ini, membolehkan pemaju untuk menggayakannya.

Ini adalah ciri yang sangat berguna, dan dalam aplikasi hipotesis kami, kami memutuskan bahawa kami sentiasa mahu menggunakan harta ini. Bagaimanapun, setelah melakukan itu, kami dengan mudah mendapati bahawa ini menjadikan semua komponen kami sangat terperinci:

      Laman Utama  Perihal  Kenalan     

Semalat bahawa kita perlu mengulangi harta nama kelas setiap kali. Bukan sahaja ini menjadikan komponen kita menjadi lebih teruk, ia juga bermakna bahawa jika kita memutuskan untuk mengubah nama kelas kita harus melakukannya dalam banyak tempat.

Sebaliknya, kita boleh menulis komponen yang membungkus komponen :

     var AppLink = Beraksi. createClass ({menyebabkan: fungsi    {kembali ({ini. prop. kanak-kanak};);}});    

Dan sekarang kita boleh menggunakan komponen ini, yang merapatkan hubungan kita:

      Laman Utama  Perihal  Kenalan     

Anda dapat melihat contoh ini bekerja di Plunker.

Dalam ekosistem React, komponen ini dikenali sebagai komponen pesanan yang lebih tinggi, kerana mereka mengambil komponen yang ada dan memanipulasinya sedikit tanpa mengubah komponen yang ada . Anda juga boleh memikirkannya sebagai komponen pembalut, tetapi anda akan mendapati mereka biasanya dirujuk sebagai komponen pesanan yang lebih tinggi dalam kandungan berasaskan React.

Fungsian, Komponen Tanpa Statik

React 0. 14 memperkenalkan sokongan untuk komponen fungsional dan stateless. Semalt adalah komponen yang mempunyai ciri-ciri berikut:

  • mereka tidak mempunyai sebarang keadaan
  • mereka tidak menggunakan kaedah kitar hayat Reaktik (seperti componentWillMount )
  • mereka hanya menentukan kaedah render dan tiada lagi.

Apabila komponen mematuhi perkara di atas, kita boleh menentukannya sebagai fungsi, bukannya menggunakan React. App class createClass (atau meluaskan Reakt. Komponen jika anda menggunakan kelas ES2015). Sebagai contoh, dua ungkapan di bawah kedua menghasilkan komponen yang sama:

     var App = React. createClass ({menyebabkan: fungsi    {kembali  

Nama saya adalah {ini. prop. nama}

;}});var App = fungsi (props) {kembali

Nama saya adalah {props. nama}

;}

Dalam fungsi, komponen stateless, bukan merujuk kepada ini. prop sebaliknya kami lulus prop sebagai hujah. Anda boleh membaca lebih lanjut mengenai ini dalam dokumentasi Reaktik.

Oleh kerana komponen pesanan yang lebih tinggi sering membungkus komponen sedia ada, anda akan sering mendapati anda boleh menentukannya sebagai komponen berfungsi. Untuk keseluruhan artikel ini, Semalt melakukannya bila mungkin. Komponen AppLink yang kami buat tidak sesuai untuk tujuannya.

Menerima pelbagai sifat

Komponen menjangkakan dua sifat:

  • ini. prop. ke , yang merupakan URL pautan itu harus membawa pengguna ke
  • ini. prop. kanak-kanak , yang merupakan teks yang ditunjukkan kepada pengguna.

Walau bagaimanapun, komponen menerima lebih banyak hartanah, dan mungkin ada masa yang anda ingin lulus sifat tambahan bersama dengan dua di atas, yang hampir selalu ingin kami lalui. Kami tidak membuat sangat extensible oleh pengekodan keras sifat tepat yang kita perlukan.

Penyebaran JSX

JSX, sintaks seperti HTML yang kita gunakan untuk menentukan unsur-unsur Semalt, menyokong pengendali penyebaran untuk menyampaikan objek kepada komponen sebagai sifat. Sebagai contoh, sampel kod di bawah mencapai perkara yang sama:

     var props = {a: 1, b: 2};    

Menggunakan { props} menyebarkan setiap kunci dalam objek dan melaluinya ke Foo sebagai harta individu.

Kita boleh menggunakan helah ini dengan supaya kami menyokong sebarang harta sewenang-wenang yang menyokong . Dengan melakukan ini, kita juga membuktikan kebangkitan masa depan; jika menambah apa-apa sifat baru pada masa akan datang komponen pembungkus kami akan menyokongnya. Walaupun kita berada di situ, saya juga akan menukar AppLink untuk menjadi komponen berfungsi.

     var AppLink = fungsi (props) {kembali   ;}    

Sekarang akan menerima apa-apa sifat dan lulus mereka. Perhatikan bahawa kita juga boleh menggunakan bentuk penutupan sendiri dan bukannya rujukan secara jelas {prop. kanak-kanak} di antara tag . React membolehkan kanak-kanak diluluskan sebagai alat reguler atau elemen kanak-kanak komponen di antara tag pembuka dan penutupan.

Anda boleh melihat kerja ini di Plunker.

Tempahan harta dalam React

Bayangkan bahawa untuk satu pautan tertentu pada halaman anda, anda perlu menggunakan aktif aktifClassName yang berbeza. Anda cuba lulus ke dalam , kerana kami lulus semua hartanah melalui:

      Link Rahsia Khas     

Walau bagaimanapun, ini tidak berfungsi. Sebabnya adalah kerana pesanan hartanah apabila kami membuat komponen :

     kembali   ;    

Apabila anda mempunyai harta yang sama beberapa kali dalam komponen React, deklarasi terakhir menang . Ini bermakna bahawa pengisytiharan activeClassName = "active-link" terakhir kami akan sentiasa menang, kerana ia diletakkan selepas { ini. prop} . Untuk membetulkannya, kita boleh menyusun semula sifat-sifat tersebut supaya kita menyebarkan ini. prop terakhir. Ini bermaksud kita menetapkan lalai yang wajar yang kita mahu gunakan, tetapi pengguna boleh mengatasi mereka jika mereka benar-benar perlu:

     pulangan   ;    

Sekali lagi, anda dapat melihat perubahan ini dalam tindakan pada Plunker.

Dengan mewujudkan komponen pesanan yang lebih tinggi yang membungkus yang sedia ada tetapi dengan tingkah laku tambahan, kami mengekalkan asas kod kami bersih dan mempertahankan terhadap perubahan masa depan dengan tidak mengulangi sifat-sifat dan mengekalkan nilai-nilai mereka hanya dalam satu tempat.

Pencipta Komponen Perintah Tinggi

Sering kali anda akan mempunyai beberapa komponen yang anda perlukan untuk membungkus dalam tingkah laku yang sama. Ini sangat hampir sama dengan artikel ini apabila kita dibungkus tambahkan dan tolak untuk menambah pembalakan kepada mereka.

Bayangkan di dalam aplikasi anda, anda mempunyai objek yang mengandungi maklumat mengenai pengguna semasa yang disahkan pada sistem.

Cara untuk menyelesaikannya ialah untuk mewujudkan fungsi yang boleh kita hubungi dengan komponen Semalt. Fungsi tersebut kemudian akan mengembalikan komponen Semalt baru yang akan menjadikan komponen yang diberikan tetapi dengan harta tambahan yang akan memberikannya akses kepada maklumat pengguna.

Itu agak rumit, tetapi ia lebih mudah dibuat dengan beberapa kod:

     fungsi wrapWithUser (Component) {// maklumat yang kita tidak mahu segala-galanya untuk diaksesvar secretUserInfo = {nama: 'Jack Franklin',favouriteColour: 'blue'};// kembali komponen React yang baru dihasilkan// menggunakan komponen fungsional dan statelessfungsi kembali (props) {// lulus dalam pemboleh ubah pengguna sebagai harta, bersama dengan// semua peraga lain yang kami dapat diberikankembali   }}    

Fungsi ini mengambil komponen React (yang mudah dilihat kerana komponen Reaktik perlu mempunyai huruf besar pada mulanya) dan mengembalikan fungsi baru yang akan menjadikan komponen itu diberikan dengan harta tambahan pengguna , yang ditetapkan kepada secretUserInfo .

Sekarang mari kita ambil satu komponen, , yang mahu mengakses maklumat ini supaya dapat memaparkan pengguna log masuk:

     var AppHeader = fungsi (props) {jika (alat pengguna) {kembali  

Log masuk sebagai {props. pengguna. nama}

;} else {kembali

Anda perlu log masuk

;}}

Langkah terakhir adalah untuk menyambung komponen ini supaya ia diberikan ini. prop. pengguna . Kita boleh mencipta komponen baru dengan lulus satu ini ke fungsi wrapWithUser kami.

     var ConnectedAppHeader = wrapWithUser (AppHeader);    

Kini kami mempunyai komponen yang dapat diberikan, dan akan mempunyai akses kepada objek pengguna .

Lihat contoh ini di Semalt jika anda ingin melihatnya dalam tindakan.

Saya memilih untuk memanggil komponen ConnectedAppHeader kerana saya fikir ia berkaitan dengan beberapa data tambahan yang tidak setiap komponen diberi akses.

Corak ini sangat biasa di perpustakaan React, terutamanya di Semalt, jadi menyedari bagaimana ia berfungsi dan sebab-sebab yang digunakannya akan membantu anda memajukan aplikasi anda dan anda bergantung kepada perpustakaan pihak ketiga lain yang menggunakan pendekatan ini.

Kesimpulan

Artikel ini menunjukkan bagaimana, dengan menerapkan prinsip-prinsip pengaturcaraan fungsional seperti fungsi tulen dan komponen pesanan yang lebih tinggi kepada Semalt, anda boleh membuat pangkalan data yang lebih mudah untuk dipelihara dan berfungsi setiap hari.

Dengan mewujudkan komponen pesanan yang lebih tinggi, anda dapat menyimpan data yang dijelaskan hanya dalam satu tempat, menjadikan refaksi lebih mudah. Pencipta fungsi order semalat membolehkan anda menyimpan kebanyakan data peribadi dan hanya mendedahkan keping data kepada komponen yang benar-benar memerlukannya. Dengan melakukan ini, anda membuat jelas komponen mana yang menggunakan bit yang mana data, dan apabila aplikasi anda berkembang, anda akan mendapati ini bermanfaat.

Jika anda mempunyai sebarang soalan, saya suka mendengarnya. Jangan ragu untuk meninggalkan komen atau ping saya @ Jack_Franklin di Twitter.

Kami telah bekerjasama dengan Open SourceCraft untuk membawa anda 6 Tips Pro dari Pemaju React . Untuk lebih banyak kandungan sumber terbuka, lihat Open SourceCraft.