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 >
*/Brinque com uma demonstração ao vivo.
<Every><Filter><Find><First><Last><Map><Reject><Reverse><Some><Sort> Portanto, os ajudantes de coleta do React é um experimento, projetado para testar se o modelo de componente do React faz sentido quando usado para manipulação da matriz.
Acredito que é melhor, pelas razões descritas acima, do que fazer manipulação de baunilha JS dentro do método de renderização do seu componente. Dito isto, este geralmente é o lugar errado para fazer esse tipo de lógica .
Para coleções muito grandes, ou para componentes que renderizam frequentemente, faz sentido mover esse tipo de manipulação intensa para funções memorizadas. Se você usar o Redux, o Reselect provavelmente é um lugar melhor para fazer esse tipo de trabalho.
Isso também significa que sua camada de apresentação nunca precisa se preocupar com este trabalho, o que geralmente é uma coisa boa.
Para aplicativos pequenos (ou seções simples em aplicativos grandes), os ajudantes de coleção do React podem ser um toque agradável. Para aplicativos Redux, porém, muitas vezes há uma maneira melhor.
Por fim, os ajudantes de coleta do React são construídos como um ponto de partida, não um destino final. Sinto -me com tentativa e erro suficientes, podemos tropeçar em algo genuinamente inovador e útil. Vou continuar experimentando e encorajamos todos nós a manter a mente aberta e um olho em busca de novas possibilidades emocionantes.
npm i -S react-collection-helpers
A UMD Builds também está disponível via CDN:
(Se você usa a compilação UMD, a variável global é CollectionHelpers )
Este projeto é um experimento para testar a utilidade dos manipuladores de coleta no fator de forma do componente.
Quando digo que é um experimento, não quero necessariamente que seja experimental . Estou bastante confiante de que é estável e seguro de usar na produção; O código é bastante simples.
Em vez disso, quero dizer que não estou convencido de que resolva um problema real. Eu gostaria de ouvir de usuários que os implementam; Isso melhora a experiência de desenvolvimento de você ou de sua equipe? Você acha que a ideia tem potencial se ela foi em uma certa direção? Estou aberto a explorar idéias tangenciais.
Deixe -me saber no Twitter ou por e -mail
Importe os componentes que você precisa:
// ES6 modules
import { Find , Every , Map } from 'react-collection-helpers' ;
// CommonJS
const { Find , Every , Map } = require ( 'react-collection-helpers' ) ;Como alternativa, você pode importar componentes individualmente, para evitar agrupar os componentes que não usa:
// 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' ; Saiba mais sobre a melhor forma de usar ajudantes de coleção React com estes guias detalhados:
<Every>Renderize as crianças se o predicado retornar verdadeiro para todas as crianças. Um nó de fallback pode ser fornecido, a ser renderizado se o predicado retornar falso para qualquer criança. Caso contrário, nada será renderizado.
Se nenhum predicado for fornecido, o conteúdo será renderizado enquanto a coleção tiver 1 item ou mais. Se uma coleção vazia for fornecida, o conteúdo de fallback será renderizado.
| Prop | Obrigatório | Tipos | Notas |
|---|---|---|---|
collection | ✓ | [ any ] | Pode ser transmitido implicitamente pelos ajudantes de coleção de pais |
predicate | ✕ | function / object | Veja os predicados para obter mais informações |
fallback | ✕ | node | Conteúdo alternativo a ser renderizado se o predicado retornar false em qualquer itens. |
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> Renderizar apenas as crianças para as quais o predicado retorna true .
| Prop | Obrigatório | Tipos | Notas |
|---|---|---|---|
collection | ✓ | [ any ] | Pode ser transmitido implicitamente pelos ajudantes de coleção de pais |
predicate | ✓ | function / object | Veja os predicados para obter mais informações |
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> Renderizar o primeiro filho para o qual o predicado retorna true .
| Prop | Obrigatório | Tipos | Notas |
|---|---|---|---|
collection | ✓ | [ any ] | Pode ser transmitido implicitamente pelos ajudantes de coleção de pais |
predicate | ✓ | function / object | Veja os predicados para obter mais informações |
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>Retorna os primeiros 1 ou mais itens da coleção. Geralmente, só útil quando criança para outro ajudante de coleção.
| Prop | Obrigatório | Tipos | Notas |
|---|---|---|---|
collection | ✓ | [ any ] | Pode ser transmitido implicitamente pelos ajudantes de coleção de pais |
num | ✕ | number | Padrões para 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> Retorna os últimos 1 ou mais itens da coleção. O oposto de <First> . Geralmente, só útil quando criança para outro ajudante de coleção.
| Prop | Obrigatório | Tipos | Notas |
|---|---|---|---|
collection | ✓ | [ any ] | Pode ser transmitido implicitamente pelos ajudantes de coleção de pais |
num | ✕ | number | Padrões para 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>O ajudante de coleção mais simples, não faz muito. Pode ser útil para garantir a consistência entre seus componentes.
| Prop | Obrigatório | Tipos | Notas |
|---|---|---|---|
collection | ✓ | [ any ] | Pode ser transmitido implicitamente pelos ajudantes de coleção de pais |
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> Renderizar apenas as crianças para as quais o predicado retorna false . O oposto de <Filter> .
| Prop | Obrigatório | Tipos | Notas |
|---|---|---|---|
collection | ✓ | [ any ] | Pode ser transmitido implicitamente pelos ajudantes de coleção de pais |
predicate | ✓ | function / object | Veja os predicados para obter mais informações |
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>Renderizar as crianças se o predicado retornar verdadeiro para qualquer criança. Um nó de fallback pode ser fornecido, a ser renderizado se o predicado retornar falso para todas as crianças. Caso contrário, nada será renderizado.
Se nenhum predicado for fornecido, o conteúdo será renderizado enquanto a coleção tiver 1 item ou mais. Se uma coleção vazia for fornecida, o conteúdo de fallback será renderizado.
| Prop | Obrigatório | Tipos | Notas |
|---|---|---|---|
collection | ✓ | [ any ] | Pode ser transmitido implicitamente pelos ajudantes de coleção de pais |
predicate | ✕ | function / object | Veja os predicados para obter mais informações |
fallback | ✕ | node | Conteúdo alternativo a ser renderizado se o predicado retornar false em todos os itens. |
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>Classifica as crianças com base em um comparador.
| Prop | Obrigatório | Tipos | Notas |
|---|---|---|---|
collection | ✓ | [ any ] | Pode ser transmitido implicitamente pelos ajudantes de coleção de pais |
comparator | ✓ | function / object | Veja comparadores para obter mais informações |
descending | ✕ | boolean | Se deve classificar em ordem decrescente, ao fornecer um comparador de 'string'. Os padrões de false (comparadores de strings classificam em ascensão). |
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 >
