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 >
*/Juega con una demostración en vivo.
<Every><Filter><Find><First><Last><Map><Reject><Reverse><Some><Sort> Por lo tanto, React Collection Helpers es un experimento, diseñado para probar si el modelo de componentes de React tiene sentido cuando se usa para la manipulación de la matriz.
Creo que es mejor, por las razones descritas anteriormente, que hacer la manipulación de vainilla JS dentro del método de renderizado de su componente. Dicho esto, este es a menudo el lugar incorrecto para hacer este tipo de lógica .
Para colecciones muy grandes, o para componentes que vuelven a renderizar con frecuencia, tiene sentido mover este tipo de manipulación intensa a funciones memoizadas. Si usa Redux, reseleccionar es un lugar mejor para hacer este tipo de trabajo.
También significa que su capa de presentación nunca tiene que preocuparse por este trabajo, lo que generalmente es algo bueno.
Para aplicaciones pequeñas (o secciones simples dentro de grandes aplicaciones), React Collection Aypers puede ser un buen toque. Sin embargo, para las aplicaciones de Redux, a menudo hay una mejor manera.
En última instancia, React Collection Helpers se construye como un punto de partida, no como un destino final. Siento que con suficiente prueba y error, podríamos toparnos con algo genuinamente innovador y útil. Voy a seguir experimentando, y me animo a todos a mantener una mente abierta y atentos a nuevas y emocionantes posibilidades.
npm i -S react-collection-helpers
Las construcciones de UMD también están disponibles a través de CDN:
(Si usa la compilación UMD, la variable global es CollectionHelpers )
Este proyecto es un experimento para probar la utilidad de los manipuladores de recolección en el factor de forma de componente.
Cuando digo que es un experimento, no necesariamente quiero decir que sea experimental . Estoy bastante seguro de que es estable y seguro de usar en producción; El código es bastante simple.
Más bien, quiero decir que no estoy convencido de que resuelva un problema real. Me gustaría saber de los usuarios que los implementan; ¿Mejora la experiencia de desarrollo de usted o su equipo? ¿Crees que la idea tiene potencial si fue en cierta dirección? Estoy abierto a explorar ideas tangenciales.
Avísame en Twitter o por correo electrónico
Importar los componentes que necesita:
// ES6 modules
import { Find , Every , Map } from 'react-collection-helpers' ;
// CommonJS
const { Find , Every , Map } = require ( 'react-collection-helpers' ) ;Alternativamente, puede importar componentes individualmente, para evitar agrupar los componentes que no 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' ; Obtenga más información sobre la mejor manera de usar los ayudantes de la colección React con estas guías en profundidad:
<Every>Renderiza a los niños si el predicado regresa verdadero para cada niño. Se puede proporcionar un nodo respaldo, que se representará si el predicado devuelve falso para cualquier niño. De lo contrario, nada se representará.
Si no se proporciona ningún predicado, el contenido se representará siempre que la colección tenga 1 elemento o más. Si se suministra una colección vacía, se representará el contenido de retroceso.
| Apuntalar | Requerido | Tipos | Notas |
|---|---|---|---|
collection | ✓ | [ any ] | Puede ser aprobado implícitamente por los ayudantes de la colección de padres |
predicate | ✕ | function / object | Ver predicados para más información |
fallback | ✕ | node | Alternar contenido que se representará si el predicado devuelve falso en cualquier elemento. |
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 solo a los niños para los cuales el predicado regresa true .
| Apuntalar | Requerido | Tipos | Notas |
|---|---|---|---|
collection | ✓ | [ any ] | Puede ser aprobado implícitamente por los ayudantes de la colección de padres |
predicate | ✓ | function / object | Ver predicados para más información |
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> Renderiza el primer hijo para el cual el predicado regresa true .
| Apuntalar | Requerido | Tipos | Notas |
|---|---|---|---|
collection | ✓ | [ any ] | Puede ser aprobado implícitamente por los ayudantes de la colección de padres |
predicate | ✓ | function / object | Ver predicados para más información |
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>Devuelve los primeros 1 o más elementos de la colección. Generalmente solo es útil cuando era niño para otro ayudante de colección.
| Apuntalar | Requerido | Tipos | Notas |
|---|---|---|---|
collection | ✓ | [ any ] | Puede ser aprobado implícitamente por los ayudantes de la colección de padres |
num | ✕ | number | Predeterminado a 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> Devuelve los últimos 1 o más elementos de la colección. Lo contrario de <First> . Generalmente solo es útil cuando era niño para otro ayudante de colección.
| Apuntalar | Requerido | Tipos | Notas |
|---|---|---|---|
collection | ✓ | [ any ] | Puede ser aprobado implícitamente por los ayudantes de la colección de padres |
num | ✕ | number | Predeterminado a 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>El ayudante de colección más simple no hace mucho. Puede ser útil para garantizar la consistencia entre sus componentes.
| Apuntalar | Requerido | Tipos | Notas |
|---|---|---|---|
collection | ✓ | [ any ] | Puede ser aprobado implícitamente por los ayudantes de la colección de padres |
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 solo a los niños para los cuales el predicado regresa false . Lo opuesto a <Filter> .
| Apuntalar | Requerido | Tipos | Notas |
|---|---|---|---|
collection | ✓ | [ any ] | Puede ser aprobado implícitamente por los ayudantes de la colección de padres |
predicate | ✓ | function / object | Ver predicados para más información |
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>Renderiza a los niños si el predicado devuelve verdadero para cualquier niño. Se puede proporcionar un nodo respaldo, que se representará si el predicado devuelve falso para todos los niños. De lo contrario, nada se representará.
Si no se proporciona ningún predicado, el contenido se representará siempre que la colección tenga 1 elemento o más. Si se suministra una colección vacía, se representará el contenido de retroceso.
| Apuntalar | Requerido | Tipos | Notas |
|---|---|---|---|
collection | ✓ | [ any ] | Puede ser aprobado implícitamente por los ayudantes de la colección de padres |
predicate | ✕ | function / object | Ver predicados para más información |
fallback | ✕ | node | Alternar contenido que se representará si el predicado devuelve falso en todos los elementos. |
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>Clasifica a los niños en función de un comparador.
| Apuntalar | Requerido | Tipos | Notas |
|---|---|---|---|
collection | ✓ | [ any ] | Puede ser aprobado implícitamente por los ayudantes de la colección de padres |
comparator | ✓ | function / object | Ver comparadores para más información |
descending | ✕ | boolean | Si clasificar en orden descendente, al proporcionar un comparador de 'cadena'. El valor predeterminado es false (clasificación de comparadores de cadenas en Ascending). |
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 >
