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를 사용하는 경우 Reselect가 이런 종류의 작업을 수행하기에 더 나은 장소 일 것입니다.
또한 프레젠테이션 계층 이이 작업에 관심이 없을 필요가 없음을 의미합니다. 이는 일반적으로 좋은 일입니다.
작은 앱 (또는 대형 앱 내의 간단한 섹션)의 경우 React Collection Helpers는 멋진 터치가 될 수 있습니다. 그러나 Redux 앱의 경우 종종 더 나은 방법이 있습니다.
궁극적으로 React Collection Helpers는 최종 목적지가 아닌 출발점으로 제작되었습니다. 나는 충분한 시행 착오로 느낌이 들었습니다. 우리는 진정으로 혁신적이고 유용한 것을 우연히 발견 할 수 있습니다. 나는 계속 실험을 할 것이며, 우리 모두가 열린 마음을 유지하고 흥미 진진한 새로운 가능성을 주시하도록 격려 할 것입니다.
npm i -S react-collection-helpers
UMD 빌드는 CDN을 통해도 제공됩니다.
(UMD 빌드를 사용하는 경우 글로벌 변수는 CollectionHelpers 입니다)
이 프로젝트는 구성 요소 폼 팩터에서 수집 조작기의 유용성을 테스트하는 실험입니다.
그것이 실험이라고 말할 때, 반드시 그것이 실험적 이라는 것을 의미하지는 않습니다. 나는 그것이 생산에 사용하는 것이 안정적이고 안전하다고 확신합니다. 코드는 매우 간단합니다.
오히려, 나는 그것이 실제 문제를 해결한다고 확신하지 않는다는 것을 의미합니다. 이를 구현 한 사용자의 의견을 듣고 싶습니다. 그것은 당신이나 당신의 팀의 개발 경험을 향상 시나요? 아이디어가 특정 방향으로 진행되면 잠재력이 있다고 생각하십니까? 나는 탄성 아이디어를 탐구 할 수 있습니다.
트위터 또는 이메일을 통해 알려주십시오
필요한 구성 요소 가져 오기 :
// 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 Collection Helpers를 사용하는 방법에 대해 자세히 알아보십시오.
<Every>술어가 모든 어린이에 대해 진실한 경우 아이들을 렌더링하십시오. 술어가 어린이의 거짓을 반환하면 폴백 노드를 제공 할 수 있습니다. 그렇지 않으면 아무것도 렌더링되지 않습니다.
술어가 제공되지 않으면 컬렉션에 1 개 이상의 항목이있는 한 컨텐츠가 렌더링됩니다. 빈 컬렉션이 제공되면 폴백 컨텐츠가 렌더링됩니다.
| 소품 | 필수의 | 유형 | 메모 |
|---|---|---|---|
collection | ✓ | [ any ] | 부모 수집 도우미가 암시 적으로 통과 할 수 있습니다 |
predicate | ✕ | function / object | 자세한 내용은 Predicates를 참조하십시오 |
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 | 자세한 내용은 Predicates를 참조하십시오 |
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 | 자세한 내용은 Predicates를 참조하십시오 |
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 | 자세한 내용은 Predicates를 참조하십시오 |
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 | 자세한 내용은 Predicates를 참조하십시오 |
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 >
