Supongamos que tengo un componente ReactJS y quiero llamar a alguna función personalizada en él, ¿es mejor tener esta función como un método de clase o definirla por separado? (suponga que la función debe usarse solo en este componente)
class OnwComponent extends React.Component { constructor() { super(); this.doubledNumber = this.doubledNumber.bind(this); } doubledNumber(num) { return num * 2; } render() { return ( <p>{doubledNumber(10)} or {this.doubledNumber(10)}? Pros and cons? ); } } function doubledNumber(num) { return num * 2; }Esto es generalmente solo una preferencia de estilo.
Habiendo dicho eso, ESlint tiene exactamente esta regla: class-methods-use-this :
Si un método de clase no usa esto, puede convertirse con seguridad en una función estática.
Además, una de las guías de estilo de React más populares (airbnb) tiene esta regla habilitada de manera predeterminada. Entonces, en términos de mejores prácticas, diría: mueva la función doubledNumber fuera de la clase.
En la discusión relacionada con la implementación de esta regla en eslint, también hablan sobre consideraciones de rendimiento:
Esta regla es estilística, pero tiene implicaciones de rendimiento. Si una función no usa esto, se copia innecesariamente cada vez que se crea una nueva instancia de la clase.
depende
Si la función está relacionada con la lógica del componente en sí y se usa solo allí, la dejaría como un método de componente.
De lo contrario:
Si la función representa una solución a un problema común de programación genérico, la movería a un componente auxiliar, importaría el componente auxiliar en su componente React y lo usaría.
Si la función está relacionada con una lógica comercial específica, la movería dentro de un componente de servicio, que contiene la lógica comercial de características, importaría el componente de servicio en su componente React y lo usaría.
Entonces, esta es una pregunta primaria basada en una opinión. Según la configuración de su proyecto y la lógica del método, debe tomar la decisión final.