javascript - not - react class functions

Función de flecha sin llaves.

Question

Soy nuevo en ES6 y React y sigo viendo las funciones de flecha. ¿Por qué algunas funciones de flecha usan llaves después de la flecha gruesa y algunas usan paréntesis? Por ejemplo:

const foo = (params) => (
    <span>
        <p>Content</p>
    </span>
);

contra

const handleBar = (e) => {
    e.preventDefault();
    dispatch(''logout'');
};

¡Gracias por cualquier ayuda!

Answer 1

En su primer ejemplo, el lado derecho de la función de flecha muestra una expresión única que está encerrada por un operador de agrupación:

const foo = (params) => ( <span> <p>Content</p> </span> ) ;

Un caso similar similar sería el siguiente:

const foo = (params) => (<span><p>Content</p></span>) ;

Una distinción, en los casos anteriores que usan expresiones simples, es que el lado derecho es el valor devuelto de la función .

Por otro lado, si usa llaves, JavaScript lo entenderá como una declaración:

const foo = (params) => {} // this is not an object being returned, it''s just an empty statement 

Por lo tanto, el uso de sentencias es un buen comienzo para que tenga código, varias líneas, y requerirá el uso de "retorno" si la función está destinada a devolver valor:

const foo = (params) => {
    let value = 1; 
    return value;
}

En caso de que quieras devolver un objeto vacío en la forma más corta:

const foo = (params) => ({}) 

Ver pruebas

Answer 2

Los paréntesis están devolviendo un solo valor, las llaves están ejecutando varias líneas de código.

Su ejemplo parece confuso porque utiliza JSX, que se parece a múltiples "líneas", pero en realidad se compila en un solo "elemento".

Aquí hay algunos ejemplos más que todos hacen lo mismo:

const a = (who) => "hello " + who + "!";
const b = (who) => (
    "hello " + 
    who + 
    "!"
);
const c = (who) => {
  return "hello " + who + "!";
}; 

También a menudo verá paréntesis alrededor de los literales de objetos porque es una manera de evitar que el analizador lo trate como un bloque de código:

const x = () => {} // Does nothing
const y = () => ({}) // returns an object

Answer 3

También se pueden usar llaves para evitar que una función de flecha de una sola línea devuelva un valor, o para que sea obvio para el siguiente desarrollador que una función de flecha de una sola línea no debe devolver nada.

Por ejemplo:

const myFunc = (stuff) => { someArray.push(stuff) }
const otherFunc = (stuff) => someArray.push(stuff)

console.log(myFunc())    // --> logs undefined
console.log(otherFunc()) // --> logs result of push which is new array length