react collection helpers
v1.2.2
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 >
*/เล่นกับการสาธิตสด
<Every><Filter><Find><First><Last><Map><Reject><Reverse><Some><Sort> ดังนั้น React Collection Helpers คือการทดลองที่ออกแบบมาเพื่อทดสอบว่าโมเดลส่วนประกอบของ React นั้นเหมาะสมเมื่อใช้สำหรับการจัดการอาร์เรย์
ฉันเชื่อว่ามันดีกว่าด้วยเหตุผลที่ระบุไว้ข้างต้นมากกว่าการจัดการวานิลลา JS ภายในวิธีการแสดงผลขององค์ประกอบของคุณ ที่กล่าวว่า นี่เป็นสถานที่ที่ผิดที่จะทำตรรกะประเภทนี้
สำหรับคอลเลกชันที่มีขนาดใหญ่มากหรือสำหรับส่วนประกอบที่แสดงซ้ำบ่อยครั้งมันสมเหตุสมผลที่จะย้ายการจัดการที่เข้มข้นเช่นนี้ไปยังฟังก์ชั่นบันทึกความทรงจำ หากคุณใช้ redux การเลือกให้กลับมาเป็นสถานที่ที่ดีกว่าในการทำงานประเภทนี้
นอกจากนี้ยังหมายความว่าเลเยอร์การนำเสนอของคุณไม่ต้องกังวลกับงานนี้ซึ่งมักจะเป็นสิ่งที่ดี
สำหรับแอพขนาดเล็ก (หรือส่วนง่าย ๆ ภายในแอพขนาดใหญ่) ผู้ช่วยคอลเลกชัน React สามารถสัมผัสได้ดี สำหรับแอพ Redux แม้ว่ามักจะมีวิธีที่ดีกว่า
ในที่สุดผู้ช่วยคอลเลกชัน React ถูกสร้างขึ้นเป็นจุดเริ่มต้นไม่ใช่ปลายทางสุดท้าย ฉันรู้สึกว่ามีการทดลองและข้อผิดพลาดเพียงพอเราอาจสะดุดกับสิ่งที่เป็นนวัตกรรมและมีประโยชน์อย่างแท้จริง ฉันจะทำการทดลองต่อไปและฉันจะสนับสนุนให้พวกเราทุกคนจงเปิดใจและจับตาดูความเป็นไปได้ใหม่ที่น่าตื่นเต้น
npm i -S react-collection-helpers
UMD Builds มีให้บริการผ่าน CDN:
(ถ้าคุณใช้ UMD Build ตัวแปรส่วนกลางคือ CollectionHelpers )
โครงการนี้เป็นการทดลองเพื่อทดสอบประโยชน์ของตัวควบคุมการรวบรวมในปัจจัยฟอร์มองค์ประกอบ
เมื่อฉันบอกว่าเป็นการทดลองฉันไม่ได้หมายความว่ามัน เป็นการทดลอง ฉันค่อนข้างมั่นใจว่ามันมีเสถียรภาพและปลอดภัยที่จะใช้ในการผลิต รหัสค่อนข้างง่าย
แต่ฉันหมายความว่าฉันไม่เชื่อว่ามันจะแก้ปัญหาที่แท้จริงได้ ฉันต้องการได้ยินจากผู้ใช้ที่นำไปใช้ มันปรับปรุงประสบการณ์การพัฒนาของคุณหรือทีมของคุณหรือไม่? คุณคิดว่าความคิดนั้นมีศักยภาพหรือไม่ถ้ามันไปในทิศทางที่แน่นอน? ฉันเปิดรับการสำรวจความคิดแบบสัมผัส
แจ้งให้เราทราบบน Twitter หรือทางอีเมล
นำเข้าส่วนประกอบที่คุณต้องการ:
// ES6 modules
import { Find , Every , Map } from 'react-collection-helpers' ;
// CommonJS
const { Find , Every , Map } = require ( 'react-collection-helpers' ) ;หรือคุณสามารถนำเข้าส่วนประกอบเป็นรายบุคคลเพื่อหลีกเลี่ยงการรวมส่วนประกอบที่คุณไม่ได้ใช้:
// 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' ; เรียนรู้เพิ่มเติมเกี่ยวกับวิธีที่ดีที่สุดในการใช้ผู้ช่วยคอลเลกชัน React กับคู่มือเชิงลึกเหล่านี้:
<Every>ทำให้เด็ก ๆ หากเพรดิเคตกลับมาเป็นจริงสำหรับเด็ก ทุก คน สามารถให้โหนดทางเลือกที่จะแสดงผลหากเพรดิเคตส่งคืนเท็จสำหรับเด็กคนใด มิฉะนั้นจะไม่มีอะไรจะแสดงผล
หากไม่มีการจัดเตรียมเนื้อหาเนื้อหาจะแสดงผลตราบใดที่คอลเลกชันมี 1 รายการขึ้นไป หากมีการจัดเก็บที่ว่างเปล่าเนื้อหาทางเลือกจะถูกแสดงผล
| ข้อต่อ | ที่จำเป็น | ประเภท | หมายเหตุ |
|---|---|---|---|
collection | [ any ] | สามารถส่งผ่านโดยผู้ช่วยผู้รวบรวมผู้ปกครองโดยปริยาย | |
predicate | function / object | ดูเพรดิเคตสำหรับข้อมูลเพิ่มเติม | |
fallback | node | เนื้อหาสำรองที่จะแสดงผลหากเพรดิเคตส่งกลับเท็จในรายการใด ๆ |
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> แสดงเฉพาะเด็ก ๆ ที่เพรดิเคตกลับมา true
| ข้อต่อ | ที่จำเป็น | ประเภท | หมายเหตุ |
|---|---|---|---|
collection | [ any ] | สามารถส่งผ่านโดยผู้ช่วยผู้รวบรวมผู้ปกครองโดยปริยาย | |
predicate | function / object | ดูเพรดิเคตสำหรับข้อมูลเพิ่มเติม |
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> ทำให้ลูกคนแรกซึ่งภาคแสดงกลับ true
| ข้อต่อ | ที่จำเป็น | ประเภท | หมายเหตุ |
|---|---|---|---|
collection | [ any ] | สามารถส่งผ่านโดยผู้ช่วยผู้รวบรวมผู้ปกครองโดยปริยาย | |
predicate | function / object | ดูเพรดิเคตสำหรับข้อมูลเพิ่มเติม |
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>ส่งคืน 1 รายการแรกขึ้นไปของคอลเลกชัน โดยทั่วไปจะมีประโยชน์เฉพาะเด็กกับผู้ช่วยคอลเลกชันอื่น
| ข้อต่อ | ที่จำเป็น | ประเภท | หมายเหตุ |
|---|---|---|---|
collection | [ any ] | สามารถส่งผ่านโดยผู้ช่วยผู้รวบรวมผู้ปกครองโดยปริยาย | |
num | number | ค่าเริ่มต้นเป็น 1 |
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> ส่งคืน 1 รายการล่าสุดขึ้นไปของคอลเลกชัน ตรงกันข้ามกับ <First> โดยทั่วไปจะมีประโยชน์เฉพาะเด็กกับผู้ช่วยคอลเลกชันอื่น
| ข้อต่อ | ที่จำเป็น | ประเภท | หมายเหตุ |
|---|---|---|---|
collection | [ any ] | สามารถส่งผ่านโดยผู้ช่วยผู้รวบรวมผู้ปกครองโดยปริยาย | |
num | number | ค่าเริ่มต้นเป็น 1 |
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>ผู้ช่วยคอลเลกชันที่ง่ายที่สุดไม่ได้ทำอะไรมาก สามารถเป็นประโยชน์เพื่อให้แน่ใจว่าสอดคล้องกันระหว่างส่วนประกอบของคุณ
| ข้อต่อ | ที่จำเป็น | ประเภท | หมายเหตุ |
|---|---|---|---|
collection | [ any ] | สามารถส่งผ่านโดยผู้ช่วยผู้รวบรวมผู้ปกครองโดยปริยาย |
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> แสดงเฉพาะเด็ก ๆ ที่เพรดิเคตกลับมา false ตรงกันข้ามกับ <Filter>
| ข้อต่อ | ที่จำเป็น | ประเภท | หมายเหตุ |
|---|---|---|---|
collection | [ any ] | สามารถส่งผ่านโดยผู้ช่วยผู้รวบรวมผู้ปกครองโดยปริยาย | |
predicate | function / object | ดูเพรดิเคตสำหรับข้อมูลเพิ่มเติม |
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>ทำให้เด็ก ๆ หากเพรดิเคตกลับมาเป็นจริงสำหรับเด็ก ทุกคน สามารถให้โหนดทางเลือกที่จะแสดงผลได้หากเพรดิเคตกลับมาเป็นเท็จสำหรับเด็กทุกคน มิฉะนั้นจะไม่มีอะไรจะแสดงผล
หากไม่มีการจัดเตรียมเนื้อหาเนื้อหาจะแสดงผลตราบใดที่คอลเลกชันมี 1 รายการขึ้นไป หากมีการจัดเก็บที่ว่างเปล่าเนื้อหาทางเลือกจะถูกแสดงผล
| ข้อต่อ | ที่จำเป็น | ประเภท | หมายเหตุ |
|---|---|---|---|
collection | [ any ] | สามารถส่งผ่านโดยผู้ช่วยผู้รวบรวมผู้ปกครองโดยปริยาย | |
predicate | function / object | ดูเพรดิเคตสำหรับข้อมูลเพิ่มเติม | |
fallback | node | เนื้อหาสำรองที่จะแสดงผลหากเพรดิเคตส่งกลับเท็จในทุกรายการ |
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>เรียงลำดับเด็ก ๆ ตามตัวเปรียบเทียบ
| ข้อต่อ | ที่จำเป็น | ประเภท | หมายเหตุ |
|---|---|---|---|
collection | [ any ] | สามารถส่งผ่านโดยผู้ช่วยผู้รวบรวมผู้ปกครองโดยปริยาย | |
comparator | function / object | ดูตัวเปรียบเทียบสำหรับข้อมูลเพิ่มเติม | |
descending | boolean | ไม่ว่าจะเรียงลำดับตามลำดับจากมากไปน้อยเมื่อให้ตัวเปรียบเทียบ 'สตริง' ค่าเริ่มต้นเป็น false (การเปรียบเทียบสตริงเรียงลำดับจากน้อยไปมาก) |
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 >
