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 هي تجربة مصممة لاختبار ما إذا كان نموذج مكون React منطقيًا عند استخدامه لمعالجة الصفيف.
أعتقد أنه أجمل ، للأسباب المذكورة أعلاه ، من القيام بمعالجة الفانيليا JS داخل طريقة عرض المكون الخاص بك. ومع ذلك ، فغالبًا ما يكون هذا هو المكان الخطأ للقيام بهذا النوع من المنطق .
بالنسبة للمجموعات الكبيرة جدًا ، أو بالنسبة للمكونات التي تعيد تقديمها بشكل متكرر ، فمن المنطقي نقل هذا النوع من التلاعب المكثف إلى وظائف مذكرات. إذا كنت تستخدم Redux ، فمن المحتمل أن يكون Reselect مكانًا أفضل للقيام بهذا النوع من العمل.
وهذا يعني أيضًا أن طبقة العرض التقديمية الخاصة بك لا تضطر أبدًا إلى الاهتمام بهذا العمل ، وهو أمر جيد عادة.
بالنسبة للتطبيقات الصغيرة (أو الأقسام البسيطة داخل التطبيقات الكبيرة) ، يمكن أن يكون مساعدو مجموعة React لمسة لطيفة. بالنسبة لتطبيقات Redux ، على الرغم من ذلك ، غالبًا ما يكون هناك طريقة أفضل.
في نهاية المطاف ، تم تصميم مساعدين React Collection كنقطة انطلاق ، وليس وجهة نهائية. أشعر أنني مع ما يكفي من التجربة والخطأ ، قد نتعثر على شيء مبتكر ومفيد حقًا. سأستمر في التجربة ، وسأشجعنا جميعًا على الحفاظ على عقل متفتح ، وراقب إمكانيات جديدة مثيرة.
npm i -S react-collection-helpers
تتوفر بنيات UMD أيضًا عبر CDN:
(إذا كنت تستخدم بناء UMD ، فإن المتغير العالمي هو 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>جعل الأطفال إذا كان المسند يعود صحيحًا لكل طفل. يمكن توفير عقدة احتياطية ، ليتم تقديمها إذا كان المسند يعيد خطأ لأي طفل. خلاف ذلك ، لن يتم تقديم شيء.
إذا لم يتم توفير أي مسند ، فسيتم تقديم المحتوى طالما أن المجموعة تحتوي على عنصر واحد أو أكثر. إذا تم توفير مجموعة فارغة ، فسيتم تقديم محتوى الاحتياط.
| دعم | مطلوب | الأنواع | ملحوظات |
|---|---|---|---|
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>إرجاع أول واحد أو أكثر من عناصر المجموعة. عموما مفيدة فقط كطفل لمساعد مجموعة آخر.
| دعم | مطلوب | الأنواع | ملحوظات |
|---|---|---|---|
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> إرجاع آخر واحد أو أكثر من عناصر المجموعة. عكس <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>جعل الأطفال إذا كان المسند يعود صحيح لأي طفل. يمكن توفير عقدة احتياطية ، ليتم تقديمها إذا كان المسند يعود كاذب لجميع الأطفال. خلاف ذلك ، لن يتم تقديم شيء.
إذا لم يتم توفير أي مسند ، فسيتم تقديم المحتوى طالما أن المجموعة تحتوي على عنصر واحد أو أكثر. إذا تم توفير مجموعة فارغة ، فسيتم تقديم محتوى الاحتياط.
| دعم | مطلوب | الأنواع | ملحوظات |
|---|---|---|---|
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 >
