Функция стрелки без фигурных скобок

Я новичок в ES6 и React, и я продолжаю видеть функции стрелок. Почему некоторые функции стрелок используют фигурные скобки после толстой стрелки, а некоторые используют круглые скобки? Например:

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

против.

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

Спасибо за любую помощь!

Ответы

Ответ 1

В скобках возвращается одно значение, фигурные скобки выполняют несколько строк кода.

Ваш пример выглядит запутанным, потому что он использует JSX, который выглядит как несколько "строк", но на самом деле просто компилируется в один "элемент".

Вот еще несколько примеров, которые все делают одно и то же:

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

Вы также часто увидите круглые скобки вокруг объектных литералов, потому что это способ избежать того, чтобы парсер рассматривал его как кодовый блок:

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

Ответ 2

Можно также использовать фигурные скобки, чтобы предотвратить возврат одной функции стрелки в одну строку - или сделать очевидным для следующего разработчика, что одна функция стрелок в одной строке не должна, в этом случае, возвращать что-либо.

Например:

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

Ответ 3

Фактически в портфеле, когда кто-то использует фигурные скобки в объявлении функции стрелки, он равен ниже:

const arrow = number => number + 1;

|||

const arrow = (number) => number + 1;

|||    

const arrow = (number) => ( number + 1 );

|||

const arrow = (number) => { return number + 1 };

Ответ 4

В первом примере правая часть функции стрелки показывает одно выражение, заключенное оператором группировки:

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

Аналогичным сопоставимым случаем будет следующее:

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

Различие в приведенных выше случаях с использованием отдельных выражений состоит в том, что правая часть является возвращаемым значением функции.

С другой стороны, если вы используете фигурные скобки, JavaScript будет понимать это как утверждение:

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

Поэтому использование инструкции - хороший старт для вас, чтобы иметь в ней код, несколько строк, и для этого потребуется использование "return", если функция предназначена для возврата значения:

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

Если вы хотите вернуть пустой объект в кратчайшей форме:

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

См. Тесты