React es uno de los marcos front-end más populares para JavaScript. A diferencia de otros marcos como Angular, no tiene opiniones. Por lo tanto, depende de usted decidir cómo desea escribir o estructurar su código React.

Este artículo explora algunas prácticas que debe seguir para mejorar el rendimiento de su aplicación React.

1. Uso de componentes funcionales y ganchos en lugar de clases

En Reaccionar, puede usar clase o componentes funcionales con ganchos. Sin embargo, debe usar componentes funcionales y ganchos con más frecuencia, ya que dan como resultado un código más conciso y legible en comparación con las clases.

Considere el siguiente componente de clase que muestra datos de la API de la NASA.

La clase NasaData extiende React. Componente {
 constructor (accesorios) {
 súper (accesorios);
 este.estado = {
 datos: [],
 };
 }
 componenteHizoMontar() {
 ha podido recuperar(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .entonces((res) => res.json())
 .entonces((json) => {
 este.setState({





instagram viewer


 datos: json,
 });
 });
 }
 renderizar() {
 const {datos} = este.estado;
 si (!datos.longitud)
 regreso (


 Recuperacion de datos... 
{" "}



 );
 regreso (
 <>
 Obtener datos usando el componente Clase 
{" "}
 {datos.mapa((elemento) => (
{elemento.título}

 ))}
 );
 }
}

El mismo componente se puede escribir usando ganchos.

constante NasaData = () => {
 const [datos, setdata] = useState (nulo);
 usarEfecto(() => {
 ha podido recuperar(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .entonces((res) => res.json())
 .entonces((json) => {
 establecer datos (json);
 });
 }, [datos]);
 regreso (
 <>
 Obtener datos usando el componente Clase 
{" "}
 {datos.mapa((elemento) => (
{elemento.título}

 ))}
 );
};

Aunque el bloque de código anterior hace lo mismo que el componente de clase, es menos complejo, mínimo y fácil de entender, lo que contribuye a una mejor experiencia del desarrollador.

2. Evite usar el estado (si es posible)

React state realiza un seguimiento de los datos que, cuando se modifican, activan el componente React para que se vuelvan a procesar. Al crear aplicaciones React, evite usar el estado tanto como sea posible, ya que cuanto más estado use, más datos tendrá para realizar un seguimiento en su aplicación.

Una forma de minimizar el uso del estado es declararlo solo cuando sea necesario. Por ejemplo, si está obteniendo datos de usuario de una API, almacene todo el objeto de usuario en el estado en lugar de almacenar las propiedades individuales.

En lugar de hacer esto:

const [nombre de usuario, establecer nombre de usuario] = useState('')
const [contraseña, establecer contraseña] = useState('')

Hacer esto:

const [usuario, setuser] = useState({})

Al decidir sobre la estructura de un proyecto, optar por uno centrado en los componentes. Esto significa tener todos los archivos relacionados con un componente en una carpeta.

Si estuvieras creando un barra de navegación componente, cree una carpeta llamada barra de navegación que contiene el barra de navegación componente en sí mismo, la hoja de estilo y otros JavaSript y archivos de activos utilizados en el componente.

Una sola carpeta que contiene todos los archivos de un componente hace que sea fácil de reutilizar, compartir y depurar. Si necesita ver cómo funciona un componente, solo necesita abrir una sola carpeta.

4. Evite el uso de índices como accesorios clave

React usa claves para identificar de forma única los elementos en una matriz. Con las claves, React puede identificar qué elemento se ha cambiado, agregado o eliminado de la matriz.

La mayoría de las veces, al representar matrices, puede usar el índice como clave.

elementos constantes = () => {
 const arr = ["elemento1", "elemento2", "elemento3", "elemento4", "elemento5"];
 regreso (
 <>
 {arr.map((elemento, índice) => {
{elemento}
;
 })}
 );
};

Si bien esto a veces funciona, usar el índice como clave puede presentar problemas, especialmente si se espera que la lista cambie. Considere esta lista.

const arr = ["elemento1", "elemento2", "elemento3", "elemento4", "elemento5"];

Actualmente, el primer elemento de la lista, “Objeto 1” está en el índice cero, pero si agregó otro elemento al principio de la lista, el “Objeto 1El índice cambiaría a 1, lo que cambia el comportamiento de su matriz.

La solución es utilizar un valor único como índice para garantizar que se mantenga la identidad del elemento de la lista.

5. Optar por fragmentos en lugar de divisiones cuando sea posible

Los componentes de React deben devolver el código envuelto en una sola etiqueta, generalmente un o un fragmento React. Debe optar por fragmentos siempre que sea posible.

Utilizando aumenta el tamaño del DOM, especialmente en proyectos grandes, ya que cuantas más etiquetas o nodos DOM tenga, más memoria necesitará su sitio web y más potencia usará un navegador para cargar su sitio web. Esto conduce a una velocidad de página más baja y una experiencia de usuario potencialmente deficiente.

Un ejemplo de eliminación innecesaria etiquetas no las está usando al devolver un solo elemento.

constante Botón = () => {
 regreso Mostrar;
};

6. Siga las convenciones de nomenclatura

Siempre debe usar PascalCase al nombrar componentes para diferenciarlos de otros archivos JSX que no son componentes. Por ejemplo: Campo de texto, Menú de navegación, y Botón de éxito.

Use camelCase para funciones declaradas dentro de componentes de React como manejarEntrada() o mostrarElemento().

7. Evite el código repetitivo

Si nota que está escribiendo código duplicado, conviértalo en componentes que se puedan reutilizar.

Por ejemplo, tiene más sentido crear un componente para su menú de navegación en lugar de escribir repetidamente el código en cada componente que requiere un menú.

Esa es la ventaja de una arquitectura basada en componentes. Puede dividir su proyecto en pequeños componentes que puede reutilizar en su aplicación.

8. Utilice la desestructuración de objetos para accesorios

En lugar de pasar el objeto props, usa la desestructuración del objeto para pasar el nombre del prop. Esto descarta la necesidad de consultar el objeto props cada vez que necesite usarlo.

Por ejemplo, el siguiente es un componente que usa props tal cual.

const Botón = (accesorios) => {
 regreso {props.text};
};

Con la desestructuración de objetos, te refieres al texto directamente.

const Botón = ({texto}) => {
 regreso {texto};
};

9. Renderizar matrices dinámicamente usando el mapa

Utilizar mapa() para renderizar dinámicamente bloques HTML repetidos. Por ejemplo, puedes usar mapa() para representar una lista de elementos en etiquetas

elementos constantes = () => {
 const arr = ["elemento1", "elemento2", "elemento3", "elemento4", "elemento5"];
 regreso (
 <>
 {arr.map((elemento, índice) => {
{elemento}
;
 })}
 );
 };

A modo de comparación, así es como puede representar la lista sin mapa(). Este enfoque es muy repetitivo.

const Lista = () => {
 regreso (


Objeto 1

artículo2

artículo3

artículo4

artículo5




 );
};

10. Escribir pruebas para cada componente de React

Escriba pruebas para los componentes que crea, ya que reduce las posibilidades de errores. Las pruebas aseguran que los componentes se comporten como cabría esperar. Uno de los marcos de prueba más comunes para React es Jest, y proporciona un entorno en el que puede ejecutar sus pruebas.

Aunque React es algo flexible en términos de cómo puede usarlo, seguir prácticas específicas lo ayudará a aprovechar al máximo su experiencia.

Al seguir estos consejos, tenga en cuenta su proyecto y metas particulares; algunos serán más relevantes en ciertos casos que otros.

Cómo consumir API en React usando Fetch y Axios

¿Quieres saber cómo usar las API? Comprender cómo consumir API en React es un elemento clave del uso de API.

Leer siguiente

Sobre el Autor