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は実験であり、Array操作に使用すると、Reactのコンポーネントモデルが意味があるかどうかをテストするように設計されています。
上記の理由で、コンポーネントのレンダリング方法内でバニラJS操作を行うよりも、それはより良いと思います。とはいえ、これはしばしばこの種のロジックをするための間違った場所です。
非常に大きなコレクションの場合、または頻繁に再レンダリングするコンポーネントの場合、この種の激しい操作をメモ化された関数に移動することは理にかなっています。 Reduxを使用する場合、再選択することはおそらくこの種の作業を行うのに適した場所です。
また、プレゼンテーションレイヤーは、この作業に関係する必要がないことを意味します。これは通常、良いことです。
小さなアプリ（または大規模なアプリ内のシンプルなセクション）の場合、Reactコレクションヘルパーは素敵なタッチになる可能性があります。ただし、Reduxアプリの場合、多くの場合、より良い方法があります。
最終的に、React Collection Helpersは、最終目的地ではなく、出発点として構築されます。十分な試行錯誤があったので、本当に革新的で便利なことにつまずくかもしれません。私は実験を続けるつもりです、そして、私たち全員が心を開いて、エキサイティングな新しい可能性に目を光らせていることを奨励します。
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>述語がすべての子供に真である場合、子供をレンダリングします。フォールバックノードを提供できます。これは、子供の述語がfalseを返す場合にレンダリングすることができます。それ以外の場合、何もレンダリングされません。
述語が提供されていない場合、コレクションに1つ以上のアイテムがある限り、コンテンツはレンダリングされます。空のコレクションが提供されると、フォールバックコンテンツがレンダリングされます。
| 小道具 | 必須 | 種類 | メモ |
|---|---|---|---|
collection | ✓✓ | [ any ] | 親のコレクションヘルパーによって暗黙的に渡すことができます |
predicate | ✕ | function / object | 詳細については、述語を参照してください |
fallback | ✕ | node | 述語が任意のアイテムでfalseを返す場合、レンダリングされる代替コンテンツ。 |
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>述語が子供に真実である場合、子供をレンダリングします。すべての子供に述語がfalseを返す場合、フォールバックノードを提供することができます。それ以外の場合、何もレンダリングされません。
述語が提供されていない場合、コレクションに1つ以上のアイテムがある限り、コンテンツはレンダリングされます。空のコレクションが提供されると、フォールバックコンテンツがレンダリングされます。
| 小道具 | 必須 | 種類 | メモ |
|---|---|---|---|
collection | ✓✓ | [ any ] | 親のコレクションヘルパーによって暗黙的に渡すことができます |
predicate | ✕ | function / object | 詳細については、述語を参照してください |
fallback | ✕ | node | すべてのアイテムで述語がfalseを返す場合、レンダリングされる代替コンテンツ。 |
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 >
