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

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

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

и

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

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

25
arrow-functions ecmascript-6 javascript react-jsx

3 ответов

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

ваш пример выглядит запутанным, потому что он использует 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
50

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

например: 

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
6

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

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's just an empty statement

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

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

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

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

посмотреть тесты

0