¿Cómo compartir la lógica entre componentes usando ganchos personalizados?

Compartir la lógica entre componentes es un aspecto crucial de la construcción de aplicaciones reaccionales escalables y mantenibles. Como proveedor de ganchos, he sido testigo de primera mano el poder de los ganchos personalizados para lograr este objetivo. En esta publicación de blog, profundizaré en cómo compartir la lógica entre componentes que usan ganchos personalizados, ofreciendo ideas prácticas y ejemplos reales del mundo.

Comprender los ganchos personalizados

Antes de explorar cómo compartir la lógica, comprendamos brevemente qué son los ganchos personalizados. Los ganchos personalizados son funciones de JavaScript que comienzan con la palabra "usar" y pueden llamar a otros ganchos. Le permiten extraer la lógica de componentes en funciones reutilizables. Por ejemplo, considere un escenario en el que múltiples componentes necesitan manejar la validación de entrada de formulario. En lugar de duplicar la lógica de validación en cada componente, podemos crear un gancho personalizado.

import {useState} from 'react'; const useInputValidation = (inicialValue = '' ') => {const [valor, setValue] = useState (inicialValue); const [isValid, setisValid] = useState (true); const handLechange = (e) => {const inputValue = e.target.value; setValue (inputValue); // Ejemplo de validación simple: verifique si la entrada no está vacía setisValid (inputValue.trim ()! == ''); }; return {value, isValid, handLechange}; }; Exportar UseInputValidation predeterminado por valor predeterminado;

En este gancho personalizado, encapsulamos la lógica de validación de gestión y entrada de estado. Cualquier componente que necesite manejar la validación de entrada ahora puede usar este gancho en lugar de implementar la lógica desde cero.

Compartir lógica con estado

Uno de los principales casos de uso para ganchos personalizados es compartir una lógica con estado entre componentes. La lógica con estado implica la gestión del estado dentro de un componente. Echemos un vistazo a cómo podemos compartir una lógica con estado usando ganchos personalizados.

Imagine que tenemos múltiples componentes que necesitan administrar la visibilidad de un modal. Podemos crear un gancho personalizado para manejar esta lógica.

import {useState} from 'react'; const usemodalVisibility = () => {const [isVisible, setisVisible] = useState (falso); const showModal = () => {setisVisible (true); }; const Hidemodal = () => {setisVisible (false); }; return {isVisible, showModal, Hidemodal}; }; exportar usemodalvisibility predeterminado;

Ahora, cualquier componente que necesite administrar la visibilidad de un modal puede usar este gancho personalizado.

importar reaccionar de 'react'; importar usemodalvisibility de './Usemodalvisibility'; const modalComponent = () => {const {isVisible, showModal, Hidemodal} = usemodalVisibility (); return (<iv> <button onClick = {showModal}> show modal </boton> {isVisible && (<div className = "modal"> <p> El contenido modal va aquí </p> <botón onClick = {Hidemodal}> Cerrar modal </botón> </div>)} </div>); }; Exportar modalComponente modal predeterminado;

Al usar el gancho personalizado, hemos compartido con éxito la lógica con estado de gestión de la visibilidad del modal entre componentes.

Compartir Lade - Effect Logic

Los ganchos personalizados también son excelentes para compartir la lógica del lado del lado. Side: los efectos incluyen cosas como la obtención de datos, las suscripciones y las manipulaciones DOM.

Digamos que tenemos múltiples componentes que necesitan obtener datos de una API. Podemos crear un gancho personalizado para manejar la lógica de recuperación de datos.

import {useState, useEffect} from'React '; const usedAtafetching = (url) => {const [data, setData] = useState (null); const [isloading, setisloading] = useState (true); const [error, setError] = useState (nulo); useEffect (() => {const fetchData = async () => {try {const respuesta = a azah fetch (url); if (! Response.ok) {throw new Error ('Network Respuesta no está bien');} constt = Await Response.json (); setData (resultado);} Catch (Err) {Seterror (err);} fetchData (); return {data, isloading, error}; }; Exportar predeterminado usado UsadaAfetching;

Ahora, cualquier componente que necesite obtener datos de una API puede usar este gancho personalizado.

importar reaccionar de 'react'; importar usadoatafetching de './usedAfetching'; const dataComponent = () => {const {data, isloading, error} = usedAtafetching ('https://api.example.com/data'); if (isloading) {return <p> carging ... </p>; } if (error) {return <p> error: {error.message} </p>; } return (<div> {data && <pre> {json.Stringify (data, null, 2)} </ pre>} </div>); }; Exportar DataComponent predeterminado;

Aplicaciones prácticas en la industria de accesorios de baño

Como proveedor de ganchos, entiendo la importancia de las aplicaciones prácticas. Por ejemplo, en la industria de accesorios de baño, podemos usar ganchos personalizados para administrar el estado de los listados de productos.

Digamos que tenemos un componente que muestra una lista deAccesorios de baño ganchos para toallasy otro componente que se muestraGanchos de baño dorados. Podemos crear un gancho personalizado para administrar el filtrado y la clasificación de estos productos.

import {useState} from 'react'; const UseProductFiltering = (InitialProducts) => {const [productos, setProducts] = useState (inicialproducts); const [filtro, setFilter] = useState (''); const man mayorfilterchange = (e) => {const filtrovalue = e.target.value; setFilter (filtreValue); const filtredproducts = inicialproducts.filter (producto => producto.name.tolowercase (). Incluye (filtreValue.tolowerCase ())); setProducts (FilteredProducts); }; return {Products, Filter, HandleFilterChange}; }; Exportar predeterminado useProductFiltering;

Ahora, tanto los ganchos de toalla como los componentes de ganchos de baño dorados pueden usar este gancho personalizado para administrar el filtrado de productos.

Conclusión y llamado a la acción

En conclusión, los ganchos personalizados son una herramienta poderosa para compartir la lógica entre los componentes. Mejoran la reutilización del código, la mantenibilidad y hacen que nuestras aplicaciones React sean más escalables. Como proveedor de ganchos, estoy comprometido a proporcionar soluciones de alta calidad para compartir la lógica en sus proyectos.

Si está interesado en aprender más sobre cómo nuestros ganchos personalizados pueden beneficiar a su negocio, o si está buscando comenzar una discusión de adquisiciones, no dude en comunicarse. Estamos aquí para ayudarlo a construir mejores aplicaciones reaccionadas con un intercambio de lógicos eficientes.

Referencias

• Reaccionar documentación oficial sobre ganchos personalizados
• "Reaccionar: en funcionamiento" de Stoyan Stefanov y Eve Porcello