A menudo escribí componentes funcionales siguiendo una 'arquitectura de clase' donde todas mis funciones relacionadas con el componente están escritas dentro de él como un método en una clase.
Por ejemplo, aquí tengo una función counterAsFloat que está relacionada con el componente Counter . Como ves, lo acabo de escribir dentro del componente:
export default function Counter() { const [counter, setCounter] = React.useState(0); const counterAsFloat = () => { return counter.toFixed(2); }; return ( <div className="counter"> <h1>{counterAsFloat()}</h1> <button onClick={() => setCounter(counter + 1)}> Increment </button> </div> ); }Pero en realidad también podría simplemente declarar la función fuera del componente y usarla con un parámetro:
const counterAsFloat = (counter) => { return counter.toFixed(2); }; export default function Counter() { const [counter, setCounter] = React.useState(0); return ( <div className="counter"> <h1>{counterAsFloat(counter)}</h1> <button onClick={() => setCounter(counter + 1)}> Increment </button> </div> ); }Entonces, ¿hay ventajas o desventajas para escribir las funciones fuera del componente funcional?
Esta pregunta se basa bastante en la opinión, pero hay algunas notas en las que debe pensar.
Declarar la función fuera del alcance es primordial para la legibilidad y la reutilización.
// Reuse logic in other components const counterAsFloat = (counter) => { return counter.toFixed(2); }; // If Counter has complex logic, you sometimes want to compose it // from functions to make it more readable. export default function Counter() { ... return (...); }Se puede argumentar que la primera opción tiene menos rendimiento porque declaras la función en cada renderizado:
export default function Counter() { ... // declare the function on every render const counterAsFloat = () => { return counter.toFixed(2); }; return (...); }Tal caso es una optimización prematura . Consulte el rendimiento de los cierres de JavaScript que se relaciona con esto.
Tenga en cuenta que en este caso específico, alinear la función es un enfoque mucho mejor.
export default function Counter() { ... return ( <div> <h1>{counter.toFixed(2)}</h1> ... </div> ); }