🙋🏽 🛒 🤽🏾 Reaccione las mejores prácticas y consejos que todo desarrollador debe conocer. Parte 1 🌨️ 📨 💫

Hola Habr! Le presento la traducción del artículo "Reaccione las mejores prácticas y consejos que todo desarrollador de React debe saber Pt. 1" de Alex Devero.

imagen

React es una de las bibliotecas más populares para crear interfaces de usuario interactivas. En este artículo, le mostraré algunos ejemplos de las mejores prácticas de React que lo ayudarán a convertirse en un mejor desarrollador. Consulte estas instrucciones para mejorar la escritura del código React.

Contenido:

Mantenga sus componentes pequeños
Evite apilar componentes
Reduce el uso de componentes con estado
Use componentes funcionales con ganchos y memo en lugar de componentes en las clases
No use accesorios en el estado original.

Epílogo: Reaccione las mejores prácticas y consejos que todo desarrollador debe saber Parte 1

1. Mantenga sus componentes pequeños

Mantener componentes pequeños es una de las mejores prácticas de React que puede hacer maravillas. Implementar solo esta práctica aparentemente simple puede ayudarlo a escribir código más limpio y más fácil de mantener. Sin mencionar que puede ayudar a mantener la razón, o al menos lo que queda.

Hay una regla general comprobada que puede usar. Echa un vistazo al método de renderizado. Si tiene más de 10 líneas, entonces su componente es probablemente demasiado grande y es un buen candidato para refactorizar y dividir en varios componentes más pequeños. Recuerde que una de las ideas para usar React, o parte de su filosofía, es reutilizar el código.

El objetivo es crear piezas de código que escriba una vez, y luego usarlas una y otra vez cuando sea necesario. Desde este punto de vista, no tiene sentido combinar todos sus datos en un componente masivo, un archivo. E, incluso si realmente no te importa el código reutilizable, piénsalo. ¿Qué tan fácil serán compatibles los componentes con cientos de líneas de código?

Tal componente será difícil de mantener, depurar y actualizar. También significa que cualquier trabajo con este componente llevará mucho más tiempo. En otras palabras, su rendimiento general se verá afectado. Y tarde o temprano te volverá loco. O volverá locos a tus compañeros y colegas, y comenzarán a volverte loco.

Elijas lo que elijas, pronto perderás la cabeza y quizás te hagas enemigos. No vale la pena Mantenga sus componentes pequeños. Mantenga amistades, cordura, tiempo y productividad. Simplifique la depuración, actualización y mantenimiento del código. Considere un ejemplo.

Era

/// // file: index.jsx import React from 'react' const books = [ { category: 'Business', price: '$20.00', name: 'Private Empires', author: 'Steve Coll' }, { category: 'Philosophy', price: '$25.00', name: 'The Daily Stoic', author: 'Ryan Holiday' }, { category: 'Sport', price: '$15.95', name: 'Moneyball', author: 'Michael Lewis' }, { category: 'Biography', price: '$21.00', name: 'Titan', author: 'Ron Chernow' }, { category: 'Business', price: '$29.99', name: 'The Hard Thing About Hard Things', author: 'Ben Horowitz' }, { category: 'Fiction', price: '$4.81', name: 'Limitless: A Novel', author: 'Alan Glynn' } ] class Bookshelf extends React.Component { render() { const tableRows = [] this.props.books.forEach((book) => { tableRows.push( <tr> <td>{book.name}</td> <td>{book.author}</td> <td>{book.price}</td> <td>{book.category}</td> </tr> ) }) return ( <div> <form> <input type="text" placeholder="Search..." /> <button>Search</button> </form> <table> <thead> <tr> <th>Name</th> <th>Author</th> <th>Price</th> <th>Category</th> </tr> </thead> <tbody>{tableRows}</tbody> </table> </div> ) } } // Render Bookshelf component ReactDOM.render(<Bookshelf books={booksData} />, document.getElementById('container'))

Se ha convertido

 /// // file: books-data.js const books = [ { category: 'Business', price: '$20.00', name: 'Private Empires', author: 'Steve Coll' }, { category: 'Philosophy', price: '$25.00', name: 'The Daily Stoic', author: 'Ryan Holiday' }, { category: 'Sport', price: '$15.95', name: 'Moneyball', author: 'Michael Lewis' }, { category: 'Biography', price: '$21.00', name: 'Titan', author: 'Ron Chernow' }, { category: 'Business', price: '$29.99', name: 'The Hard Thing About Hard Things', author: 'Ben Horowitz' }, { category: 'Fiction', price: '$4.81', name: 'Limitless: A Novel', author: 'Alan Glynn' } ] export default booksData /// // file: components/books-table.jsx import React from 'react' class BooksTable extends React.Component { render() { const tableRows = [] this.props.books.forEach((book) => { tableRows.push( <tr> <td>{book.name}</td> <td>{book.author}</td> <td>{book.price}</td> <td>{book.category}</td> </tr> ) }) return ( <table> <thead> <tr> <th>Name</th> <th>Author</th> <th>Price</th> <th>Category</th> </tr> </thead> <tbody>{tableRows}</tbody> </table> ) } } export default BooksTable /// // file: components/search-bar.jsx import React from 'react' class SearchBar extends React.Component { render() { return ( <form> <input type="text" placeholder="Search..." /> <button>Search</button> </form> ) } } export default SearchBar /// // file: components/bookshelf.jsx import React from 'react' // Import components import BooksTable from './components/books-table' import SearchBar from './components/search-bar' class Bookshelf extends React.Component { render() { return ( <div> <SearchBar /> <BooksTable books={this.props.books} /> </div> ) } } export default Bookshelf /// // file: index.jsx import React from 'react' // Import components import Bookshelf from './components/bookshelf // Import data import booksData from './books-data' // Render Bookshelf component ReactDOM.render(<Bookshelf books={booksData} />, document.getElementById('container'))

2. Evite apilar componentes

Cada regla debe aplicarse con precaución. Esto también se aplica a estas mejores prácticas de React, especialmente la anterior. Cuando se trata de componentes, es muy fácil exagerar y escribir incluso las piezas de código más pequeñas en forma de componentes. No hagas esto. No tiene sentido hacer que cada párrafo, abarque o divida un componente.
Piense antes de comenzar a dividir cada componente en partes pequeñas. Puede pensar en el componente como una mezcla de "HTML", que solo hace una cosa, es independiente, y el usuario lo percibirá como un todo. ¿Tiene sentido hacer de este fragmento de código un componente? Si no, combine este código. De lo contrario, divídalo.

Veamos algunos ejemplos para ilustrar esta definición de un componente. Un ejemplo es el diálogo modal. Este componente puede constar de muchos elementos pequeños, como divs, encabezados, párrafos de texto, botones, etc. Teóricamente, todos estos elementos se pueden distinguir en pequeños componentes.

En la práctica, esto no tiene sentido. Sí, algunos de estos elementos pueden existir independientemente uno del otro. Sin embargo, ¿es realmente útil crear un componente que consista solo en un párrafo o un encabezado? ¿Qué pasará después? Componente para etiqueta, entrada o incluso span? Este enfoque no es sostenible.

Afortunadamente, hay otra forma de ver esto. Puede utilizar la metodología de diseño atómico como guía. En el diseño atómico, todo se divide en seis categorías: átomos, moléculas, organismos, plantillas, páginas y utilidades. Comienza con los elementos más pequeños, como botones, enlaces, accesos directos, entradas, etc. Estos son los átomos.

Luego combinas los átomos y creas las moléculas. Ejemplos de moléculas pueden ser un diálogo modal, formulario, ventana emergente, menú desplegable, navegación, etc. Además, puede combinar una molécula con otra o con un átomo y crear un organismo. Un ejemplo de organismo es un encabezado, una lista de productos o una cesta de la compra. Las plantillas, páginas y utilidades ya no son importantes.

¿Cómo combinar el diseño atómico con estos dos ejemplos de mejores prácticas para los componentes React? No nos compliquemos. Un componente puede ser algo más que un átomo, es decir molécula, organismo o incluso una plantilla o página, si se lleva al límite. En este sentido, la etiqueta, el encabezado y el párrafo no son componentes, porque son átomos.
Sin embargo, cuadros de diálogo modales, formularios, ventanas emergentes, listas desplegables, etc. son componentes, ya que todos se relacionan con moléculas o con la categoría de un organismo. Todavía hay algunos elementos dudosos, como un botón. Sí, desde el punto de vista de la estructura atómica es un átomo. Sin embargo, puede existir independientemente, en muchas variaciones, y aún así funcionar.

En tales casos, sugiero no pensar en las mejores prácticas de React, y dejarme guiar por mis instintos internos. Al final, eres tú quien trabajará con el código. Lo importante es que te sientas cómodo. Por lo tanto, no siga ciegamente una lista de las mejores prácticas. ¿Y si trabajas en equipo? Comparte tus pensamientos sobre esto con tus colegas.

3. Reducir el uso de componentes con estado

Esta es una de las mejores prácticas de React que se ha aplicado durante algún tiempo. Sin embargo, esta práctica se ha vuelto más popular con el advenimiento de React 16.8.0 y React Hooks. Antes de eso, cuando quería usar el estado o cualquier método de ciclo de vida, también tenía que usar un componente con estado. No había otra manera.

Hooks cambió eso. Después de que se revelaron oficialmente, los desarrolladores de React ya no se limitaron a componentes con estado porque necesitaban usar el estado. Gracias a los ganchos, los desarrolladores de React ahora pueden escribir componentes sin estado utilizando el estado e incluso métodos de ciclo de vida como lo deseen.

¿Por qué es esto importante? Los componentes sin estado o funcionales son generalmente mejores que los componentes con estado cuando se trata de rendimiento. La razón es que no hay métodos de estado o ciclo de vida. En otras palabras, menos código para ejecutar y transpilar. Por supuesto, esta diferencia puede ser apenas perceptible, casi invisible, si está trabajando en un proyecto muy pequeño.

Sin embargo, estas pequeñas diferencias pueden acumularse a medida que crece su proyecto. También piense en cuántas líneas de código requiere un componente con estado en comparación con las funcionales. La funcionalidad también es más corta y, a menudo, más fácil de leer. Veamos el componente del botón, definido como un componente con control de estado y funciones. ¿Cuál te gusta más?

 // Button defined as a stateful component class Button extends React.Component { handleClick = () => { // Do something } render() { return( <button type="button" onClick={this.handleClick}>Click me</button> ) } } // Button defined as a functional component const Button = () => { const handleClick = () => { // Do something } return( <button type="button" onClick={handleClick}>Click me</button> ) }

4. Use componentes funcionales con ganchos y memo en lugar de componentes en las clases

Como ya comentamos, ya no necesita usar componentes con estado solo para usar el estado. Además, algunos desarrolladores de React también creen que en el futuro, React comenzará a alejarse de las clases. Es esto cierto, ahora no importa. Lo importante es que un componente funcional ahora puede usar el estado gracias a los ganchos.
Y en segundo lugar, el uso de componentes funcionales tiene sus ventajas. TLDR? No hay clase, herencia y constructor. No hay esta palabra clave. Las mejores prácticas de reacción estricta. Alta relación señal / ruido. Los componentes hinchados y las estructuras de datos defectuosas son más fáciles de detectar. El código es más fácil de entender y verificar. Y, nuevamente, el rendimiento es mejor.

Y una cosa más. Muchos desarrolladores de React se opusieron a los componentes funcionales. Uno de los problemas es que usted, como desarrollador de React, no puede controlar el proceso de renderizado cuando utiliza un componente funcional. Cuando algo cambia, React devuelve un componente funcional, independientemente de si el componente en sí ha sido cambiado.
En el pasado, la solución era usar un componente puro. El componente limpio proporciona la capacidad de comparar estado y accesorios. Esto significa que React puede "verificar" si el contenido del componente, los accesorios o el componente en sí han cambiado. Si es así, lo devolverá. De lo contrario, se saltará la nueva representación y reutilizará el último resultado representado. Menos representación equivale a un mejor rendimiento.
Con React 16.6.0, esto ya no es un problema y el argumento en contra de los componentes funcionales ya no es válido. Lo que cambió el juego fue memo. Memo trajo una comparación superficial con un componente funcional, la capacidad de "verificar" si el contenido del componente, los accesorios o el componente en sí mismo ha cambiado.

Nuevamente, según esta comparación, React devolverá el componente o reutilizará el resultado de la última representación. En resumen, memo le permite crear componentes funcionales "limpios". Ya no hay ninguna razón para usar componentes con estado o componentes puros. Al menos si no necesita hacer frente a una condición difícil.

En este caso, debe considerar usar algo más escalable y manejable, como MobX, Redux o Flux, en lugar del estado de los componentes. Otra opción posible sería utilizar el contexto. En cualquier caso, gracias a los ganchos y memo, los componentes funcionales son sin duda algunas de las mejores prácticas de React en las que vale la pena pensar.

5. No use accesorios en el estado original

Esta es una de las mejores prácticas de React que me gustaría saber cuando comencé a aprender. Entonces no sabía que era una muy mala idea usar accesorios en el estado inicial. ¿Por qué es una mala idea? El problema es que se llama al constructor solo una vez durante la creación del componente.

Esto significa que cuando realice algunos cambios en los accesorios la próxima vez, el estado de los componentes no se actualizará. Retendrá su significado anterior. Entonces asumí erróneamente que los accesorios están sincronizados con el estado. Por lo tanto, cuando cambian algunos detalles, el estado cambiará para reflejar este cambio. Lamentablemente, esto no es así.

Esto podría no ser un problema si desea que el estado reciba valores de los accesorios solo una vez durante el renderizado inicial, y controlaría el estado dentro del componente. De lo contrario, puede resolver este problema con componentDidUpdate. Como su nombre lo indica, este método de ciclo de vida le permite actualizar un componente cuando algo cambia, como los accesorios.

Si decide usar este método, recuerde una cosa. No estará involucrado en la representación inicial, sino solo en la siguiente. Por lo tanto, asegúrese de inicializar el estado del componente con los valores necesarios, posiblemente obtenidos de los accesorios. Luego use componentDidUpdate para actualizar estos valores y el componente según sea necesario.

Epílogo: Reaccione las mejores prácticas y consejos que todo desarrollador debe saber Parte 1

Felicidades Acaba de terminar la primera parte de esta mini serie de artículos sobre las mejores prácticas de React. Hoy, ha aprendido cinco prácticas que puede usar para hacer que React code sea más corto, más simple, mejor, más rápido y más fácil de leer y mantener. Ahora depende de usted implementar la práctica con la que está de acuerdo y comenzar a usarla.

En la siguiente parte, aprenderá sobre un conjunto diferente de mejores prácticas y consejos para ayudarlo a mejorar su código React, así como sus habilidades de programación. Hasta entonces, tome lo que aprendió hoy y pase parte de su tiempo practicando.

Si te gustó este artículo, suscríbete.

Publicado originalmente en el blog de Alex Devero.