React es uno de los marcos front-end más populares para el lenguaje JavaScript. A diferencia de otros frameworks como Angular, no está muy sistematizado. Por lo tanto, depende de usted decidir cómo desea escribir o estructurar su código React.
Algunas de las mejores prácticas de React que debe seguir para mejorar el rendimiento de su aplicación se enumeran a continuación para que las aproveche. Verificar Cómo construir una aplicación de chat usando React y Firebase.
1. Usa componentes y ganchos en lugar de clases
En React, puedes usar clases o componentes funcionales con Hooks. Sin embargo, debe usar componentes funcionales y ganchos con más frecuencia porque dan como resultado un código más conciso y legible en comparación con las clases.
Aquí hay un extracto del bloque de clase que muestra datos de la API de la NASA.
class NasaData extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
};
}
componentDidMount() {
fetch(“https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
.then((res) => res.json())
.then((json) => {
this.setState({
data: json,
});
});
}
render() {
const { data } = this.state;
if (!data.length)
return (
<div>
<h1> Fetching data…. </h1>{“ “}
</div>
);
return (
<>
<h1> Fetch data using Class component </h1>{“ “}
{data.map((item) => (
<div key={item.id}>{item.title}</div>
))}
</>
);
}
} Puedes escribir el mismo componente usando Hooks:
const NasaData = () => {
const [data, setdata] = useState(null);
useEffect(() => {
fetch(“https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
.then((res) => res.json())
.then((json) => {
setdata(json);
});
}, [data]);
return (
<>
<h1> Fetch data using Class component </h1>{“ “}
{data.map((item) => (
<div key={item.id}>{item.title}</div>
))}
</>
);
}; Aunque el código anterior hace lo mismo que el componente de clase, es menos complejo, menos limitado y fácil de entender.
2. Evite usar el estado (si es posible)
React state realiza un seguimiento de los datos que, cuando se modifican, hacen que el componente React se vuelva a procesar. Al crear aplicaciones React, evite usar el estado tanto como sea posible porque cuanto más estado use, más datos tendrá que rastrear en su aplicación.
Una forma de reducir el uso del estado es declararlo solo cuando sea necesario. Por ejemplo, si está obteniendo datos de usuario de una API, almacene el objeto de usuario completo en estado en lugar de propiedades individuales.
en lugar de lo siguiente:
const [username, setusername] = useState(‘’) const [password, setpassword] = useState(‘’)
Puedes hacer lo siguiente:
const [user, setuser] = useState({}) 3. Organice los archivos relacionados con el mismo componente en una carpeta
Al decidir sobre una estructura de carpetas para su aplicación React, considere usar una estructura centrada en componentes. Esto significa almacenar todos los archivos relacionados con un solo componente en una carpeta.
Si está creando un complemento de Navbar, por ejemplo, cree una carpeta llamada Navbar que contenga el archivo del complemento, la hoja de estilo, los archivos javascript y otros activos utilizados en el complemento.
Una sola carpeta que contiene todos los archivos de componentes facilita la reutilización, el intercambio y la depuración. Si necesita ver cómo funciona un complemento, simplemente abra una carpeta y explore su contenido.
Otras mejores prácticas de la carpeta React son:
- Utilice archivos de índice para resumir los detalles de implementación de su archivo de componentes. Mirando el ejemplo de la barra de navegación, cree una carpeta de la barra de navegación y en esa carpeta agregue un archivo de componente llamado index.js (o .ts).
- Mantenga los componentes reutilizables en una carpeta separada. Si tiene componentes que son utilizados por más de una parte de su aplicación, considere mantenerlos en una carpeta con nombre Componentes. Esto te ayudará a localizarlos fácilmente.
- Mantenga las funciones de la utilidad en una carpeta separada, como la carpeta lib o la carpeta Asistentes. Esto facilitará la gestión y reutilización de estas funciones más adelante.
4. Evite usar índices como accesorios principales
React usa claves para identificar de forma única los elementos en una matriz. Con claves, React puede marcar qué elemento se ha cambiado, agregado o eliminado de la matriz.
Al renderizar matrices, puede usar el índice como clave.
const Items = () => {
const arr = [“item1”, “item2”, “item3”, “item4”, “item5”];
return (
<>
{arr.map((elem, index) => {
<li key={index}>{elem}</li>;
})}
</>
);
}; Si bien esto funciona a veces, usar el índice como clave puede causar problemas, especialmente si se espera que cambie la lista. Considere esta lista.
const arr = [“item1”, “item2”, “item3”, “item4”, “item5”];
Actualmente, el primer elemento de la lista, "Elemento1" está en el índice cero, pero si agrega otro elemento al principio de la lista, el índice de "Elemento1" cambiará a 1, lo que cambia el comportamiento de su matriz.
La solución es utilizar un valor único como índice para garantizar que se conserve la identidad del elemento de la lista.
5. Elegir Divs en lugar de Divs cuando sea posible
Los componentes de React deben devolver el código encerrado en una sola etiqueta, generalmente o el Reaccionar. Debe elegir partes cuando sea posible.
usar plomo Esto puede aumentar el tamaño del DOM, especialmente en proyectos grandes porque cuantas más etiquetas o nodos DOM tenga, más memoria necesitará su sitio web, más potencia usará el navegador para cargar el sitio web. Esto da como resultado una velocidad de página más baja y una experiencia de usuario potencialmente deficiente.
Un ejemplo de cómo deshacerse de las señales. No imprescindible es no utilizarlo al devolver un único artículo.
const Button = () => {
return <button>Display</button>;
}; 6. Siga las convenciones de nombres
Siempre debe usar PascalCase (eliminar espacios y poner en mayúscula la primera letra de cada palabra) al nombrar componentes para distinguirlos de otros archivos JSX que no son componentes. Por ejemplo: TextField, NavMenu y SuccessButton.
Use CamelCase (escriba frases sin espacios ni puntuación, las palabras están separadas por una sola letra mayúscula) para las funciones declaradas dentro de los componentes de React como handleInput() o showElement().
7. Evita el código redundante
Si nota que está escribiendo código redundante, conviértalo en componentes reutilizables.
Por ejemplo, tiene más sentido crear un componente para su propio menú de navegación que escribir código repetidamente en cada componente que requiere un menú.
Esta es la ventaja de la arquitectura basada en bloques. Puede dividir su proyecto en pequeños componentes que puede reutilizar en toda su aplicación. Verificar Cómo crear un reproductor de video en React.
8. Use la atribución de descomposición para obtener accesorios
En lugar de pasar el objeto props, use la asignación de deconstrucción del objeto para pasar el nombre de la propiedad. Esto ignora la necesidad de consultar el objeto props cada vez que necesite usarlo.
Por ejemplo, el siguiente es un componente que utiliza las propiedades tal cual.
const Button = (props) => {
return <button>{props.text}</button>;
}; Con la asignación de descomposición de objetos, puede hacer referencia al texto directamente.
const Button = ({text}) => {
return <button>{text}</button>;
}; 9. Muestre arreglos dinámicamente usando el mapa
Use map() para mostrar bloques iterados de HTML dinámicamente. Por ejemplo, puede usar map() para mostrar una lista de elementos en etiquetas .
const Items = () => {
const arr = [“item1”, “item2”, “item3”, “item4”, “item5”];
return (
<>
{arr.map((elem, index) => {
<li key={elem+index}>{elem}</li>;
})}
</>
);
}; A modo de comparación, aquí se explica cómo mostrar la lista sin map(). Este enfoque es muy repetitivo.
const List = () => {
return (
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
</ul>
);
}; 10. Escriba pruebas para cada componente de la reacción.
Escriba pruebas para los componentes que construye porque reducen la posibilidad de errores. Las pruebas garantizan que los componentes se comporten como usted espera. Jest es uno de los marcos de prueba más populares en React y proporciona un entorno en el que puede ejecutar sus pruebas. Verificar Cómo crear objetos de arrastrar y soltar en React.
React es un framework poderoso, pero debes seguir ciertas prácticas
Aunque React es muy flexible en la forma en que lo usa, seguir prácticas específicas lo ayudará a aprovechar al máximo su experiencia.
Cuando siga estos consejos, tenga en cuenta su proyecto y sus objetivos porque las diferentes mejores prácticas de React pueden ser más relevantes en diferentes contextos. Por ejemplo, es posible que un proyecto con un equipo pequeño y un alcance limitado no requiera el mismo nivel de organización de carpetas que un proyecto grande con varios equipos trabajando juntos. Puedes ver ahora Cómo contribuir a proyectos de código abierto como principiante.
