Реагировать - синтаксис функции стрелки

Question

Короче говоря, работая в React, бывают ситуации, когда мне приходится использовать функции стрелок с () вместо {} и наоборот.

const foo = (item) => ( ... );

и

const foo = (item) => { ... };

Мой код часто дает сбой, потому что я их путаю. Я пытаюсь понять разницу между двумя функциями стрелок. Каковы лучшие сценарии ios для обоих?

Большое спасибо!

Answer 1

Функция стрелки без фигурных скобок возвращает выражение функции. Пример:

() => 'Hello world';

будет делать то же самое, что и

function() {
  return 'Hello world';
}

Если вы используете фигурные скобки, вы можете добавить несколько операторов. Пример:

() => {
  const str = 'Hello world';
  return str;
}

будет делать то же самое, что и:

function() {
  const str = 'Hello world';
  return str;
}

Подробнее см. MDN документы .

Некоторые небольшие дополнительные заметки:

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

() => ({
  key: 'value',
  another_key: 'another_value'
});

Основные различия между function() и () => ... заключаются в том, что функции стрелок не имеют привязок к некоторым ключевым словам (например, this), а функции стрелок не имеют прототип и не могут быть используется в качестве конструкторов.

Answer 2

Не уверен, правильно ли я вас понимаю, но:

const oneLiner = (param) => myArr.filter().map();

const twoLiner = (param) => {func1(); func2();}

Если вы можете поместить все в одну строку (например, отображение или фильтрацию), вам не нужны круглые скобки для тела вашей функции. Если вам нужно более одной строки, используйте {}.

. Кроме того, oneLiner возвращает значение, даже без «return». Вторая функция нуждается в ключевом слове «return», чтобы вернуть что-то.