Soy nuevo en reaccionar y me duele mirar el componente inundado con muchas funciones e inicializaciones de variables junto con la interfaz de usuario. ¿Es posible separarlos?
En lugar de la configuración predeterminada, como a continuación. ¿Cómo separo la lógica de negocios en otro archivo?
function MyComponent() { const [data, setData] = useState(''); const someFunc = () => { //do something. }; ... some 100-liner initializations return ( ... ) }Un enfoque común que utilizo es separar la lógica empresarial en su propio archivo myComponentHelper.js
Esto también facilitará la prueba de la función porque no podrá usar y cambiar el estado de reacción sin pasarlo como argumento y devolver los cambios.
myComponent/ myComponent.jsx myComponentHelper.js myComponentTest.js // myComponent.js import { someFunc } from './myComponentHelper'; function MyComponent() { const [data, setData] = useState(''); const x = someFunc(data); return ( ... ) } // myComponentHelper.js export const someFunc = (data) => { //do something. return something; } // myComponentTest.js import { someFunc } from './myComponentHelper'; test("someFunc - When data is this - Should return this", () => { const data = {...}; const result = someFunc(data); expect(result).toEqual("correct business data"); });La separación de la lógica de negocios en otros archivos se puede hacer de varias maneras diferentes.