Должен ли const быть вне функциональных компонентов в React.js?

#reactjs #typescript #optimization #scope #constants

Вопрос:

Часть моего кода получила комментарий к обзору, в котором говорилось что-то вроде «переместить константу за пределы функции, чтобы избежать повторного объявления». Это был обычный функциональный компонент, что-то вроде этого:

 export default function someComponent() {
  const someString = 'A string';
  ///...
}
 

Меня смутила идея о том, что это приведет к повторному объявлению, потому что это не так, я знаю, что запись, содержащая переменные и константы, принадлежит области видимости, так что это не совсем так.
Но потом я вспомнил, что typescript не позволяет иметь константу внутри класса, не уверен в причине или это связано. Но затем ts добавил модификатор только для чтения в ts v2, так что путаница остается.

Должна ли const быть вне функциональных компонентов или нет? Я хотел бы узнать больше мнений.

Ответ №1:

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

Однако в JavaScript при каждом выполнении функции локальные определения будут объявляться повторно, даже если они являются константами или функциями. Так что это компромисс. Если функция вызывается много раз, это становится накладными расходами.

Я думаю, что компилятору, такому как TypeScript tsc или какой-либо другой препроцессор, не составит труда извлечь эти определения во время компиляции, чтобы получить лучшее из обоих миров. Но вполне вероятно, что они не делают этого, чтобы оставаться полностью совместимыми. Я не знаю о таких инструментах, но было бы интересно, если бы они существовали.