Consideremos dos componentes de gancho:
export function HookCompA({a,b,c,d}){ ... useEffect(...,[x]) useEffect(...,[y]) functionA{...}; functionB{...}; functionC{...}; functionD{...}; ... } export function HookCompB({a,b,c,e}){ ... useEffect(...,[x]) useEffect(...,[w]) functionA{...}; functionB{...}; functionC{...}; functionE{...}; ... }A pesar de ser tan similares, debido a la naturaleza del contexto, debemos considerar estos ganchos como componentes diferentes, sin embargo, hay mucho código duplicado para refactorizar e incluso comparten el mismo código para algunos efectos.
Debido a mi experiencia con OOP, es difícil imaginar cómo resolver este problema sin una devolución de llamada a la herencia, que no es de lo que se tratan los ganchos. Tampoco creo que solo exportar las funciones en otro archivo y agregarlas a ambos ganchos sea la mejor idea.
Deseo conocer las mejores prácticas para reutilizar código en hooks, especialmente para efectos.
Deseo conocer las mejores prácticas para reutilizar código en hooks, especialmente para efectos.
Esta es una pregunta bastante subjetiva / obstinada, por lo que intentaré responder de manera objetiva.
Los ganchos de reacción son simplemente funciones antiguas de Javascript con algunas reglas especiales aplicadas contra ellos sobre cómo y dónde se pueden llamar.
A pesar de ser tan similares, debido a la naturaleza del contexto, debemos considerar estos ganchos como componentes diferentes, sin embargo, hay mucho código duplicado para refactorizar e incluso comparten el mismo código para algunos efectos.
Los ganchos de React se diseñaron teniendo en cuenta el código de compatibilidad/reutilización.
Con Hooks, puede extraer lógica con estado de un componente para que pueda probarse de forma independiente y reutilizarse. Los ganchos le permiten reutilizar la lógica con estado sin cambiar la jerarquía de sus componentes. Esto facilita compartir Hooks entre muchos componentes o con la comunidad.
Esto significa exactamente como usted describe, centralizando las funciones "comunes" en, digamos, un directorio src/utils donde pueden probarse de forma aislada y demostrar que funcionan, y exportarse para la composición en otras unidades, como ganchos React personalizados. Incluso las funciones utilizadas en useEffect y otros ganchos básicos de React se pueden centralizar/organizar.
import { functionA, functionB, functionC, functionD, functionE, functionF, functionG, functionH, } from '../utils'; export useBaseHook = (a,b,c) => { useEffect(() => { functionG(a, b); functionH(c); }, [a, b, c]); }; export function useHookCompA({ a, b, c, d }) { ... useEffect(...,[x]); useEffect(...,[y]); useBaseHook(d, c, a); functionA{...}; functionB{...}; functionC{...}; functionD{...}; ... } export function useHookCompB({ a, b, c, e }) { ... useEffect(...,[x]); useEffect(...,[w]); functionA{...}; functionB{...}; functionC{...}; functionE{...}; ... }