1

tengo esta duda desde hace bastante tiempo, no se si es importante o no el diferenciar funciones de tipo flecha (arrow function) frente a las funciones normales (function) en los componentes de ReactJs, pongo por ejemplo un código muy sencillo.

Aquí utilizo "function", el clásico de javascript de toda la vida

function Home() {
  return <div>Esto es la ventana Home </div>;
}

export default Home;

Y aqui utilizo las "arrow function" de ES6

const Home = () => {
  return <div>Esto es la ventana Home </div>;
};

export default Home;

Ambos son el mismo componente pero declarados de distinta manera, uno utiliza "arrow function" y el otro "function". Simplemente querría saber si esta diferencia es siquiera relevante para crear componentes o no, para así poder resolver una duda que tengo desde hace tiempo y también mejorar mi código de ReactJs.

Gracias de antemano y un saludo a todos 😁

1

2 respuestas 2

0

Te responderé en terminos de Javascript puro, ya que para react esto también se debería cumplir.

La principal diferencia (en mi opinión) es el scope, por ejemplo al utilizar this

Demo:

const objeto = {

  NormalFunction :function(){
       console.log(this)
  },
  ArrowFunction : () => console.log(this)
};

objeto.NormalFunction();
objeto.ArrowFunction();

Como observarás ambas funciones son equivalentes, pero this referencian a cosas distintas.

Otra diferencia es el uso de arguments, el cual te permite tener argumentos variables en una función, esto no es posible en arrow functions

const objeto = {

  NormalFunction :function(){
       console.log(arguments)
  },
  ArrowFunction : () => console.log(arguments)
};

objeto.NormalFunction(444,333);
objeto.ArrowFunction(4444,222);

0

Depende de la situación, pero comparto generalidades.


El primer ejemplo se conoce como JavaScript function declaration:

function Home() {
  return <div>Esto es la ventana Home </div>;
}

Se usa el keyword function y presenta hoisting behavior.

Puedes leer acerca de hoisting en JS pero en general nos permite escribir la declaración de una función en cualquier parte del archivo y llamar a la función antes de su declaración.

Esta sintáxis se conoce como JavaScript function expression:

const Home = () => {
  return <div>Esto es la ventana Home </div>;
};

Se usa arrow function y no presentan hoisting behavior, por lo que su declaración debe estar escrita en el archivo antes de su llamada.

Algunos beneficios de usar function expression en vez de function declarations en react pueden ser:

  • function expression: no presentan hoisting behavior, por lo que no se pueden llamar antes de que se definan. Esto puede ser útil para evitar comportamientos inesperados en el árbol de componentes react.

  • function expression: se pueden definir como expresiones dentro de otras funciones lo cual le da flexibilidad a la creación de componentes.

  • function expression: el this binding se aplica automáticamente del outter context, aunque en react moderno casi no se usa el this.

  • Con el tiempo function expression con arrow son más fáciles de leer sobre todo cuando se usan en callbacks (map, filter, reduce etc...)

Si quieres saber más estudia los conceptos de this context en JavaScript asi como hoisting.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.