React Arrow Конвенция Плохая практика [дубликат]

РЕДАКТИРОВАТЬ # 2: найти причину AirBnbs в их Руководстве по стилю Javascript

Не забудьте назвать выражение - анонимные функции могут затруднить поиск проблема в стеке вызовов ошибки ( Обсуждение )

Исходный ответ ниже

MDN имеет хорошее отклонение от того, как function name inference работает, включая два предупреждения:

Замечания

Существует нестандартное поведение вывода <function>.name в следующих двух сценариях:

1. при использовании интерпретаторов сценариев

Интерпретатор сценария установит свойство имени функции только в том случае, если функция не имеет собственного свойства с именем name. ..

2. при использовании js tooling

Будьте осторожны при использовании преобразований Function.name и исходного кода, таких как выполняемые с помощью компрессоров (minifiers) JavaScript или обфускаторов

....

В несжатом версия запускается в правдивую ветвь, а logs «foo» - это экземпляр «Foo», тогда как в сжатой версии он ведет себя по-разному и переходит в else-ветку. Поэтому, если вы полагаетесь на Function.name, как в приведенном выше примере, убедитесь, что ваш конвейер сборки не меняет имена функций или не предполагает, что функция имеет определенное имя.

Что такое выражение имени функции?

Свойство name возвращает имя функции или (до реализации ES6) пустую строку для анонимных функций

function doSomething() {}

console.log(doSomething.name); // logs "doSomething"

Функции, созданные с помощью синтаксиса new Function (...) или просто Function (...), имеют свойство name для пустой строки. В следующих примерах создаются анонимные функции, поэтому имя возвращает пустую строку

var f = function() {};
var object = {
  someMethod: function() {}
};

console.log(f.name == ''); // true
console.log(object.someMethod.name == ''); // also true

Браузеры, которые реализуют функции ES6, могут вывести имя анонимной функции из ее синтаксической позиции . Например:

var f = function() {};
console.log(f.name); // "f"

Мнение

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

Во-первых, я не ever используют function.name

Во-вторых, смешение лексической области именных функций с назначением немного ослабляет:

// This...
function Blah() {
   //...
}
Blah.propTypes = {
 thing: PropTypes.string
}
// ...is the same as...
Blah.propTypes = {
 thing: PropTypes.string
}
function Blah() {
   //...
}

// ALTERNATIVELY, here lexical-order is enforced
const Blah = () => {
   //...
}
Blah.propTypes = {
    thing: PropTypes.string
}

И, в-третьих, все вещи, Я предпочитаю функции стрелок:

• сообщают читателю, что нет this, no arguments и т. д.
• выглядит лучше (imho)
• (в прошлый раз я смотрел, функции стрелок были немного быстрее)

EDIT: моментальные снимки памяти

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

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

Плюс я использовал только снимки памяти один раз, поэтому я чувствую себя комфортно, когда по-умолчанию чувствую «инструмент» для (субъективной) ясности.

Это связано с тем, что:

const Listing = ({ hello }) => (
  <div>{hello}</div>
);

имеет выведенное имя листинга, хотя похоже, что вы его именовали, вы на самом деле не:

Пример

// we know the first three ways already...

let func1 = function () {};
console.log(func1.name); // func1

const func2 = function () {};
console.log(func2.name); // func2

var func3 = function () {};
console.log(func3.name); // func3

что об этом?

const bar = function baz() {
    console.log(bar.name); // baz
    console.log(baz.name); // baz
};

function qux() {
  console.log(qux.name); // qux
}