Beranda>Terkait pemrograman>Komponen pihak ketiga
Unduh

Bereaksi Pembantu Koleksi

Serangkaian komponen utilitas yang dapat dikomposisi untuk memanipulasi koleksi.

Contoh cepat 

 import { Filter , Sort , First } from 'react-collection-helpers' ;

const users = [
  { id : 'a' , name : 'Harry' , lastMessagedAt : '2016-03-14T15:00' , isOnline : true } ,
  { id : 'b' , name : 'Bob' , lastMessagedAt : '2017-01-20T12:00' , isOnline : false } ,
  { id : 'c' , name : 'Molly' , lastMessagedAt : '2013-01-02T03:04' , isOnline : false } ,
  { id : 'd' , name : 'Karrin' , lastMessagedAt : '2017-01-12T11:05' , isOnline : true } ,
  { id : 'e' , name : 'Thomas' , lastMessagedAt : '2014-03-04T13:37' , isOnline : true } ,
]

const UserList = ( { users } ) => (
  < Filter collection = { users } predicate = { { isOnline : true } } >
    < Sort comparator = "lastMessagedAt" >
      < First num = { 4 } >
        { user => < div key = { user . id } > { user . name } </ div > }
      </ First >
    </ Sort >
  </ Filter >
)

ReactDOM . render (
  < UserList users = { users } > ,
  document.querySelector('#root')
)

/*
  Renders:

  < div >
    < div > Karrin </ div >
    < div > Harry </ div >
    < div > Thomas </ div >
  </ div >
*/

Demo langsung

Bermain dengan demo langsung.

Daftar isi

  • Fitur
  • Kekurangan
  • Instalasi
  • Umpan balik diinginkan
  • Penggunaan
  • Pemandu
    • Memahami dan Menyesuaikan Markup
    • Predikat dalam pembantu koleksi reaksi
    • Pembanding dalam pembantu koleksi reaksi
  • Referensi API
    • <Every>
    • <Filter>
    • <Find>
    • <First>
    • <Last>
    • <Map>
    • <Reject>
    • <Reverse>
    • <Some>
    • <Sort>

Fitur

  • Berguna - Termasuk 10+ komponen untuk membantu Anda memfilter, mengurutkan, dan mengiris koleksi.
  • ✒️ Ramah desainer - membuat kehidupan desainer Anda lebih mudah dengan menulis komponen tanpa logika inline yang kompleks.
  • ⚡ Tiny - Bangunan penuh hanya 2.5kb, dan modular sehingga Anda hanya dapat mengimpor komponen yang Anda butuhkan.
  • ? Performant - Eksperimen menunjukkan bahwa komponen -komponen ini sama penampilannya dengan metode asli.
  • ? Disesuaikan - Elemen pembungkus dapat berupa jenis elemen apa pun yang Anda inginkan (asli atau komposit), dan semua alat peraga yang tidak diakui dilewati. Menyusun pembantu koleksi tidak membuat markup HTML tambahan!

Kekurangan

Jadi, React Collection Helters adalah percobaan, yang dirancang untuk menguji apakah model komponen React masuk akal saat digunakan untuk manipulasi array.

Saya percaya bahwa ini lebih baik, karena alasan yang diuraikan di atas, daripada melakukan manipulasi vanilla JS dalam metode render komponen Anda. Yang mengatakan, ini sering kali merupakan tempat yang salah untuk melakukan logika semacam ini .

Untuk koleksi yang sangat besar, atau untuk komponen yang sering dirender ulang, masuk akal untuk memindahkan manipulasi intens semacam ini ke dalam fungsi yang dimoized. Jika Anda menggunakan Redux, maka ulangi kemungkinan merupakan tempat yang lebih baik untuk melakukan pekerjaan semacam ini.

Ini juga berarti bahwa lapisan presentasi Anda tidak pernah harus menyangkut pekerjaan ini, yang biasanya merupakan hal yang baik.

Untuk aplikasi kecil (atau bagian sederhana dalam aplikasi besar), pembantu koleksi reaksi bisa menjadi sentuhan yang bagus. Namun, untuk aplikasi redux, seringkali ada cara yang lebih baik.

Pada akhirnya, React Collection Helter dibangun sebagai titik awal, bukan tujuan akhir. Saya merasa dengan cukup coba, kita mungkin menemukan sesuatu yang benar -benar inovatif dan bermanfaat. Saya akan terus bereksperimen, dan saya akan mendorong kita semua untuk tetap berpikiran terbuka, dan mengawasi kemungkinan baru yang menarik.

Instalasi 

 npm i -S react-collection-helpers

UMD Builds juga tersedia melalui CDN:

  • react-collection-helpers.js
  • react-collection-helpers.min.js

(Jika Anda menggunakan build UMD, variabel global adalah CollectionHelpers )

Umpan balik diinginkan

Proyek ini merupakan percobaan untuk menguji kegunaan manipulator pengumpulan dalam faktor bentuk komponen.

Ketika saya mengatakan itu adalah percobaan, saya tidak harus bermaksud bahwa itu eksperimental . Saya cukup yakin bahwa itu stabil dan aman untuk digunakan dalam produksi; Kodenya cukup sederhana.

Sebaliknya, maksud saya bahwa saya tidak yakin bahwa itu memecahkan masalah nyata. Saya ingin mendengar dari pengguna yang menerapkannya; Apakah itu meningkatkan pengalaman pengembangan Anda atau tim Anda? Apakah Anda pikir idenya memiliki potensi jika itu menuju ke arah tertentu? Saya terbuka untuk menjelajahi ide -ide tangensial.

Beri tahu saya di Twitter, atau melalui email

Penggunaan

Impor komponen yang Anda butuhkan: 

 // ES6 modules
import { Find , Every , Map } from 'react-collection-helpers' ;

// CommonJS
const { Find , Every , Map } = require ( 'react-collection-helpers' ) ;

Atau, Anda dapat mengimpor komponen secara individual, untuk menghindari bundel komponen yang tidak Anda gunakan: 

 // This method avoids bundling unused components, and reduces gzipped bundles
// by about 1kb.
import Find from 'react-collection-helpers/lib/components/Find' ;
import Every from 'react-collection-helpers/lib/components/Every' ;
import Map from 'react-collection-helpers/lib/components/Map' ;

Pemandu

Pelajari lebih lanjut tentang cara terbaik untuk menggunakan pembantu koleksi reaksi dengan panduan mendalam ini:

  • Memahami dan Menyesuaikan Markup
  • Predikat dalam pembantu koleksi reaksi
  • Pembanding dalam pembantu koleksi reaksi

Referensi API

<Every>

Render anak -anak jika predikat kembali benar untuk setiap anak. Node fallback dapat disediakan, untuk diterjemahkan jika predikat kembali salah untuk anak mana pun. Kalau tidak, tidak ada yang akan diberikan.

Jika tidak ada predikat yang disediakan, konten akan diberikan selama koleksi memiliki 1 item atau lebih. Jika koleksi kosong disediakan, konten fallback akan diberikan.

Alat peraga

Menopang Diperlukan Tipe Catatan
collection ✓ [ any ] Dapat secara implisit disahkan oleh pembantu pengumpulan orang tua
predicate ✕ function / object Lihat Predikat untuk informasi lebih lanjut
fallback ✕ node Konten alternatif yang akan diterjemahkan jika predikat mengembalikan false pada item apa pun.

Contoh 

 const collection = [
  { id : 'a' , src : '...' , isLoaded : true } ,
  { id : 'b' , src : '...' , isLoaded : true } ,
  { id : 'c' , src : '...' , isLoaded : false } ,
] ;

< Every
  collection = { collection }
  predicate = { { isLoaded : true } }
  fallback = { < span > Loading... </ span > }
>
  { item => < img key = { item . id } src = { item . src } /> }
</ Every >

<Filter>

Hanya membuat anak -anak yang predikatnya kembali true .

Alat peraga

Menopang Diperlukan Tipe Catatan
collection ✓ [ any ] Dapat secara implisit disahkan oleh pembantu pengumpulan orang tua
predicate ✓ function / object Lihat Predikat untuk informasi lebih lanjut

Contoh 

 const collection = [
  { id : 'a' , name : 'apple' , price : 1.00 } ,
  { id : 'b' , name : 'banana' , price : 5.00 } ,
  { id : 'c' , name : 'carrot' , price : 2.50 } ,
] ;

< Filter collection = { collection } predicate = { item => ( item . price < 3 ) } >
  { item => < div key = { item . id } > { item . name } </ div > }
</ Filter >

<Find>

Render anak pertama yang predikatnya kembali true .

Alat peraga

Menopang Diperlukan Tipe Catatan
collection ✓ [ any ] Dapat secara implisit disahkan oleh pembantu pengumpulan orang tua
predicate ✓ function / object Lihat Predikat untuk informasi lebih lanjut

Contoh 

 const collection = [
  { id : 'a' , name : 'John' , isAdmin : false } ,
  { id : 'b' , name : 'Jane' , isAdmin : true } ,
  { id : 'c' , name : 'Jala' , isAdmin : false } ,
] ;

< Find collection = { collection } predicate = { { isAdmin : true } } >
  { user => < div key = { user . id } > Your group's admin is { user . name } </ div > }
</ Find >

<First>

Mengembalikan 1 item pertama atau lebih dari koleksi. Umumnya hanya berguna sebagai seorang anak bagi penolong koleksi lain.

Alat peraga

Menopang Diperlukan Tipe Catatan
collection ✓ [ any ] Dapat secara implisit disahkan oleh pembantu pengumpulan orang tua
num ✕ number Default ke 1

Contoh 

 const collection = [
  { id : 'a' , name : 'John' , distance : 3.14 } ,
  { id : 'b' , name : 'Jane' , distance : 0.45 } ,
  { id : 'c' , name : 'Jala' , distance : 1.23 } ,
] ;

< Sort collection = { collection } comparator = "distance" >
  < First >
    { user => < div key = { user . id } > You are closest to { user . name } </ div > }
  </ First >
</ Sort >

<Last>

Mengembalikan 1 item terakhir atau lebih dari koleksi. Kebalikan dari <First> . Umumnya hanya berguna sebagai seorang anak bagi penolong koleksi lain.

Alat peraga

Menopang Diperlukan Tipe Catatan
collection ✓ [ any ] Dapat secara implisit disahkan oleh pembantu pengumpulan orang tua
num ✕ number Default ke 1

Contoh 

 const collection = [
  { id : 'a' , name : 'John' , distance : 3.14 } ,
  { id : 'b' , name : 'Jane' , distance : 0.45 } ,
  { id : 'c' , name : 'Jala' , distance : 1.23 } ,
] ;

< Sort collection = { collection } comparator = "distance" >
  < Last >
    { user => < div key = { user . id } > You are furthest from { user . name } </ div > }
  </ Last >
</ Sort >

<Map>

Penolong koleksi paling sederhana, tidak banyak membantu. Dapat bermanfaat untuk memastikan konsistensi antara komponen Anda.

Alat peraga

Menopang Diperlukan Tipe Catatan
collection ✓ [ any ] Dapat secara implisit disahkan oleh pembantu pengumpulan orang tua

Contoh 

 const collection = [
  { id : 'a' , name : 'John' } ,
  { id : 'b' , name : 'Jane' } ,
  { id : 'c' , name : 'Jala' } ,
] ;

< Map collection = { collection } >
  { user => < div key = { user . id } > { user . name } </ div > }
</ Map >

<Reject>

Hanya membuat anak -anak yang predikatnya kembali false . Kebalikan dari <Filter> .

Alat peraga

Menopang Diperlukan Tipe Catatan
collection ✓ [ any ] Dapat secara implisit disahkan oleh pembantu pengumpulan orang tua
predicate ✓ function / object Lihat Predikat untuk informasi lebih lanjut

Contoh 

 const collection = [
  { id : 'a' , name : 'apple' , price : 1.00 } ,
  { id : 'b' , name : 'banana' , price : 5.00 } ,
  { id : 'c' , name : 'carrot' , price : 2.50 } ,
] ;

< Reject collection = { collection } predicate = { item => ( item . price > 3 ) } >
  { item => < div key = { item . id } > { item . name } </ div > }
</ Reject >

<Some>

Render anak -anak jika predikatnya kembali berlaku untuk anak mana pun . Node fallback dapat disediakan, untuk diterjemahkan jika predikat kembali salah untuk semua anak. Kalau tidak, tidak ada yang akan diberikan.

Jika tidak ada predikat yang disediakan, konten akan diberikan selama koleksi memiliki 1 item atau lebih. Jika koleksi kosong disediakan, konten fallback akan diberikan.

Alat peraga

Menopang Diperlukan Tipe Catatan
collection ✓ [ any ] Dapat secara implisit disahkan oleh pembantu pengumpulan orang tua
predicate ✕ function / object Lihat Predikat untuk informasi lebih lanjut
fallback ✕ node Konten alternatif yang akan diterjemahkan jika predikat mengembalikan false pada semua item.

Contoh 

 const collection = [
  { id : 'a' , username : 'sickskillz' , hasWon : false } ,
  { id : 'b' , username : 'dabomb12345' , hasWon : false } ,
] ;

< Some
  elementType = { Leaderboard }
  collection = { collection }
  predicate = { { hasWon : true } }
>
  { user => < LeaderboardRow key = { user . id } { ... user } /> }
</ Some >

<Sort>

Mengurutkan anak -anak berdasarkan pembanding.

Alat peraga

Menopang Diperlukan Tipe Catatan
collection ✓ [ any ] Dapat secara implisit disahkan oleh pembantu pengumpulan orang tua
comparator ✓ function / object Lihat pembanding untuk informasi lebih lanjut
descending ✕ boolean Apakah akan memilah urutan menurun, saat menyediakan pembanding 'string'. Default ke false (komparator string mengurutkan dalam naik).

Contoh 

 const collection = [
{ id : 'a' , name : 'apple' , price : 1.00 } ,
{ id : 'b' , name : 'banana' , price : 5.00 } ,
{ id : 'c' , name : 'carrot' , price : 2.50 } ,
] ;

< Sort collection = { collection } comparator = "price" >
  { item => < StoreItem key = { item . id } { ... item } /> }
</ Sort >
Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua