Imagina que tienes un JSON API y un mock
[
{category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
{category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
{category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
{category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
{category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
{category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];Lo primero que debe hacer es dibujar cuadros alrededor de cada componente (y subcomponente) en el Mock y darles todos los nombres. Si estás trabajando con un diseñador, es posible que ya lo hayan hecho, ¡así que ve a hablar con ellos! ¡Sus nombres de capas de Photoshop pueden terminar siendo los nombres de tus componentes React!
Pero, ¿cómo sabes cuál debería ser su propio componente? Solo use las mismas técnicas para decidir si debe crear una nueva función u objeto. Una de esas técnicas es el principio de responsabilidad única, es decir, un componente idealmente solo debe hacer una cosa. Si termina creciendo, debería descomponerse en subcomponentes más pequeños.
Dado que a menudo muestra un modelo de datos JSON a un usuario, descubrirá que si su modelo se construyó correctamente, su UI (y por lo tanto su estructura de componentes) se correlacionará muy bien. Esto se debe a que los modelos de IU y de datos tienden a adherirse a la misma arquitectura de información, lo que significa que el trabajo de separar su UI en componentes a menudo es trivial. Solo divídalo en componentes que representen exactamente una pieza de su modelo de datos.
- FilterableProductTable (naranja): contiene la totalidad del ejemplo
- SearchBar (azul): recibe toda la entrada del usuario
- ProductTable (verde): muestra y filtra la recopilación de datos en función de la entrada del usuario
- ProductCategoryRow (turquesa): muestra un encabezado para cada categoría
- ProductRow (rojo) : muestra una fila para cada producto
Analizando tenemos la siguiente jerarquia:
- FilterableProductTable
- SearchBar
- ProductTable
- ProductCategoryRow
- ProductRow
Ahora que tiene su jerarquía de componentes, es hora de implementar su aplicación. La forma más fácil es crear una versión que tome su modelo de datos y represente la interfaz de usuario pero no tenga interactividad. Lo mejor es desacoplar estos procesos porque construir una versión estática requiere mucha escritura y no pensar, y agregar interactividad requiere pensar mucho y no escribir mucho. Veremos por qué.
Para crear una versión estática de su aplicación que represente su modelo de datos, querrá construir componentes que reutilicen otros componentes y pasen datos usando accesorios. Los accesorios son una forma de pasar datos de padres a hijos. Si está familiarizado con el concepto de estado, no use estado para construir esta versión estática. El estado está reservado solo para interactividad, es decir, datos que cambian con el tiempo. Como esta es una versión estática de la aplicación, no la necesita.
Puedes construir de arriba hacia abajo o de abajo hacia arriba. Es decir, puede comenzar con la construcción de los componentes más arriba en la jerarquía (es decir, comenzando con FilterableProductTable) o con los que están más abajo (ProductRow). En ejemplos más simples, generalmente es más fácil ir de arriba hacia abajo, y en proyectos más grandes, es más fácil ir de abajo hacia arriba y escribir pruebas a medida que construyes.
Al final de este paso, tendrá una biblioteca de componentes reutilizables que representan su modelo de datos. Los componentes solo tendrán métodos render () ya que esta es una versión estática de su aplicación. El componente en la parte superior de la jerarquía (FilterableProductTable) tomará su modelo de datos como un apoyo. Si realiza un cambio en su modelo de datos subyacente y vuelve a llamar a ReactDOM.render (), la interfaz de usuario se actualizará. Es fácil ver cómo se actualiza su UI y dónde hacer cambios, ya que no pasa nada complicado. El flujo de datos unidireccional de React (también llamado enlace unidireccional) mantiene todo modular y rápido.
Para hacer que su UI sea interactiva, debe ser capaz de desencadenar cambios en su modelo de datos subyacente. Reaccionar hace que esto sea fácil con el estado.
Para construir su aplicación correctamente, primero debe pensar en el conjunto mínimo de estado mutable que necesita su aplicación. La clave aquí es DRY: Don’t Repeat Yourself Calcule la representación mínima absoluta del estado que necesita su aplicación y calcule todo lo demás que necesita según demanda. Por ejemplo, si está compilando una TODO list, simplemente mantenga una gran variedad de elementos TODO; no mantenga una variable de estado separada para el conteo. En cambio, cuando desee representar el TODO count, simplemente tome la longitud de la matriz de elementos TODO.
Piense en todos los datos en nuestra aplicación de ejemplo. Tenemos:
- La lista original de productos
- El texto de búsqueda que el usuario ha ingresado
- El valor de la casilla de verificación
- La lista filtrada de productos
Repasemos cada uno y descubramos cuál es el estado. Simplemente haga tres preguntas sobre cada dato:
- ¿Se transfiere desde un padre a través de props? Si es así, probablemente no sea estado.
- ¿Se mantiene sin cambios con el tiempo? Si es así, probablemente no sea estado.
- ¿Tu puedes calcular basado en cualquier otro estado o props en tu componente? Si es así, no es estado.
La lista original de productos se transfiere como props, por lo que no es estado. El texto de búsqueda y la casilla de verificación parecen estar en estado, ya que cambian con el tiempo y no se pueden calcular a partir de nada. Y, por último, la lista filtrada de productos no tiene estado porque se puede calcular combinando la lista original de productos con el texto de búsqueda y el valor de la casilla de verificación.
Entonces, finalmente, nuestro estado es:
- El texto de búsqueda que el usuario ha ingresado
- El valor de la casilla de verificación
De acuerdo, entonces hemos identificado cuál es el conjunto mínimo de estado de la aplicación. Luego, necesitamos identificar qué componente muta o posee este estado.
Recuerde: React se trata de un flujo de datos unidireccional en la jerarquía de componentes. Puede no estar inmediatamente claro qué componente debe poseer qué estado. Esta suele ser la parte más difícil de entender para los recién llegados, por lo tanto, siga estos pasos para descubrirla:
Para cada pedazo de estado en su aplicación:
- Identifique cada componente que representa algo en función de ese estado.
- Encuentre un componente propietario común (un componente único sobre todos los componentes que necesitan el estado en la jerarquía).
- O bien el propietario común u otro componente más arriba en la jerarquía debe poseer el estado.
- Si no puede encontrar un componente donde tenga sentido ser propietario del estado, cree un nuevo componente simplemente para mantener el estado y agréguelo en algún lugar de la jerarquía por encima del componente propietario común.
Repasemos esta estrategia para nuestra aplicación:
ProductTablenecesita filtrar la lista de productos en función del estado ySearchBarnecesita mostrar el texto de búsqueda y el estado verificado.- El componente propietario común es
FilterableProductTable. - Conceptualmente, tiene sentido que el texto del filtro y el valor verificado vivan en
FilterableProductTable
Genial, así que hemos decidido que nuestro estado vive en FilterableProductTable. Primero, agregue una propiedad de instancia this.state = {filterText: '', inStockOnly: false} al constructor de FilterableProductTable para reflejar el estado inicial de su aplicación. Luego, pase filterText e inStockOnly a ProductTable y SearchBar como un apoyo. Finalmente, use estos accesorios para filtrar las filas en ProductTable y establezca los valores de los campos de formulario en SearchBar.
Puedes empezar a ver cómo se comportará tu aplicación: establece filterText como "bola" y actualiza tu aplicación. Verá que la tabla de datos se actualiza correctamente.
Hasta ahora, hemos creado una aplicación que se representa correctamente en función de los accesorios y el estado que fluye por la jerarquía. Ahora es el momento de respaldar el flujo de datos a la inversa: los componentes del formulario que se encuentran en lo más profundo de la jerarquía necesitan actualizar el estado en FilterableProductTable.
React hace que este flujo de datos sea explícito para facilitar la comprensión de cómo funciona su programa, pero requiere un poco más de tipeo que el enlace de datos bidireccional tradicional.
Si intenta escribir o marcar la casilla en la versión actual del ejemplo, verá que React ignora su entrada. Esto es intencional, ya que hemos establecido el value prop de el input para que siempre sea igual al state pasado desde FilterableProductTable.
Pensemos en lo que queremos que suceda. Queremos asegurarnos de que cada vez que el usuario cambie el formulario, actualicemos el estado para reflejar la entrada del usuario. Como los componentes solo deben actualizar su propio estado, FilterableProductTable pasará devoluciones de llamada a SearchBar que se activará cada vez que se actualice el estado. Podemos usar el evento onChange en las entradas para notificarlo. Las devoluciones de llamadas pasadas por FilterableProductTable llamarán a setState () y la aplicación se actualizará.
Aunque esto suena complejo, en realidad se trata de unas pocas líneas de código. Y es realmente explícito cómo fluyen tus datos en toda la aplicación.