Si ha estado trabajando con React por un tiempo, probablemente se encontró con envase y componentes de presentación , o componentes inteligentes y tontos. Estos términos describen un patrón que divide la capa de interfaz de usuario de los componentes de React de la lógica.
Separar la interfaz de usuario de la lógica comercial no es nada exclusivo de React: la separación de preocupaciones es un principio de diseño que tiene ya existió en los años 70. Por ejemplo, es una práctica común separar el código que accede a la base de datos de la lógica comercial en el backend.
Entonces, en React, resolvimos este problema al crear componentes de contenedor que contienen toda la lógica, que luego pasaría los datos a través de accesorios al componente de presentación.
Con la introducción de los ganchos React, hay un nuevo enfoque para esto: usar ganchos personalizados.
¿Por qué debemos separar la lógica del componente?
Antes de comenzar a desacoplar la lógica de nuestros componentes React, debemos saber por qué.
Organizar nuestro código de manera que cada función o componente sea responsable de una sola cosa tiene la ventaja de que es mucho más fácil de cambiar y mantener (Dave y Andrew llaman a esto “ortogonalidaden su libro El programador pragmático).
Aplicar esto a React significa que nuestro componente se verá más limpio y organizado. Por ejemplo, no necesitaremos desplazarnos más allá del muro de la lógica antes de editar la interfaz de usuario.
Organizar su código de esta manera no solo hace que se vea mejor y sea más fácil de navegar, sino que también facilita el cambio, ya que cambiar el enlace no afecta la interfaz de usuario y viceversa.
Las pruebas también son más accesibles: podemos probar la lógica por separado de la interfaz de usuario si así lo deseamos. Sin embargo, la ventaja más significativa para mí es cómo este enfoque organiza mi código.
Cómo desacoplar la lógica con ganchos React
Para desacoplar la lógica de nuestro componente, primero crearemos un enlace personalizado.
Tomemos este componente como ejemplo. Calcula el valor exponencial del número base y el exponente:
Puedes encontrar el código fuente completo esta página.
El código tiene el siguiente aspecto:
export const ExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = (base ** exponent).toFixed(2);
const handleBaseChange = (e) => {
e.preventDefault();
setBase(e.target.value);
};
const handleExponentChange = (e) => {
e.preventDefault();
setExponent(e.target.value);
};
return (
<div className="blue-wrapper">
<input
type="number"
className="base"
onChange={handleBaseChange}
placeholder="Base"
value={base}
/>
<input
type="number"
className="exponent"
onChange={handleExponentChange}
placeholder="Exp."
value={exponent}
/>
<h1 className="result">{result}</h1>
</div>
);
};
Esto ya puede verse bien, pero por el bien de este tutorial, solo imagen que hay más lógica aquí.
Como primer paso, haremos mover la lógica a un gancho personalizado y llamarlo dentro de nuestro componente.
const useExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = (base ** exponent).toFixed(2);
const handleBaseChange = (e) => {
e.preventDefault();
setBase(e.target.value);
};
const handleExponentChange = (e) => {
e.preventDefault();
setExponent(e.target.value);
};
return {
base,
exponent,
result,
handleBaseChange,
handleExponentChange,
};
};
export const ExponentCalculator = () => {
const {
base,
exponent,
result,
handleExponentChange,
handleBaseChange,
} = useExponentCalculator();
// ...
};
Podríamos mover este gancho a un archivo separado para una separación más prominente de las preocupaciones.
Además, podemos separar aún más nuestro gancho en funciones más pequeñas y reutilizables. En este caso, sólo podemos extraer calculateExponent.
usarExponentCalculator.js
const calculateExponent = (base, exponent) => base ** exponent;
const useExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = calculateExponent(base, exponent).toFixed(2);
// ...
};
Probar estas funciones es mucho más fácil que probar todo el código del componente del primer ejemplo. Podríamos probarlos con cualquier biblioteca de prueba de Node.js, que ni siquiera necesita admitir componentes de React.
Ahora tenemos nuestro código específico del marco (React) en el código para el componente y el enlace, mientras que nuestra lógica comercial vive en las diferentes funciones que definimos más adelante (que son independientes del marco).
Mejores prácticas
Nombrar
Me gusta nombrar mis ganchos personalizados después del componente como una concatenación de use y el nombre del componente (p. ej. useExponentCalculator). Entonces llamo al archivar lo mismo como el gancho.
Es posible que desee seguir una convención de nomenclatura diferente, pero le recomiendo siendo consistente en su proyecto.
Si puedo reutilizar partes de un gancho personalizado, normalmente lo muevo a otro archivo bajo src/hooks.
No te excedas
Trate de ser pragmático. Si un componente tiene solo unas pocas líneas de JS, no es necesario separar la lógica.
CSS en JS
Si está utilizando una biblioteca CSS-in-JS (useStyles), es posible que también desee mover este código a otro archivo.
Puede moverlo al mismo archivo que el gancho. Sin embargo, prefiero mantenerlo sobre el componente en el mismo archivo o moverlo a su propio archivo si crece demasiado.
Conclusión
Ya sea que piense que el uso de ganchos personalizados mejora su código o no, al final, se trata de una preferencia personal. Si su base de código no incluye mucha lógica, las ventajas de este patrón no serán demasiado relevantes para usted.
Los ganchos personalizados son solo una forma de aumentar la modularidad; Yo también recomendaría encarecidamente dividir componentes y funciones en partes más pequeñas y reutilizables cuando sea posible.
El tema también se discute en un nivel más general en El programador pragmático. Escribí un artículo sobre mis temas favoritos del libro, así que si te interesa, asegúrate de Mira eso.
