Зачем использовать заглавные типы при указании компонента React? [Дубликат]

@thefourtheye верно, говоря, что эти переменные не могут быть доступны до их объявления. Однако это немного сложнее.

Не были ли объявлены переменные, объявленные с let или const? Что действительно происходит здесь?

Все объявления (var, let, const, function, function*, class) «подняты» в JavaScript. Это означает, что если имя объявлено в области видимости, то в этой области идентификатор всегда ссылается на эту конкретную переменную:

x = "global";
// function scope:
(function() {
    x; // not "global"

    var/let/… x;
}());
// block scope (not for `var`s):
{
    x; // not "global"

    let/const/… x;
}

Это верно как для функциональных, так и для блоков.

Разница между объявлениями var / function / function* и let / const / class declara & shy; tion является инициализацией. Первые инициализируются с помощью функции undefined или (генератора), когда привязка создается в верхней части области. Однако лексически объявленные переменные остаются неинициализированными. Это означает, что при попытке доступа к нему возникает исключение ReferenceError. Он будет инициализироваться только тогда, когда оценивается инструкция let / const / class, все до (выше), которое называется временной зоной .

x = y = "global";
(function() {
    x; // undefined
    y; // Reference error: y is not defined

    var x = "local";
    let y = "local";
}());

Обратите внимание, что оператор let y; инициализирует переменную с undefined, например let y = undefined;.

Мертвая зона temporal не является синтаксическим местоположением, время между созданием переменной (области) и инициализацией. Это не ошибка ссылки на переменную в коде выше объявления, если этот код не выполняется (например, тело функции или просто мертвый код), и он будет генерировать исключение, если вы получите доступ к переменной до инициализации, даже если доступ код ниже объявления (например, в объявлении с функцией hoisted, которое вызывается слишком рано).

Есть ли разница между let и const в этом вопросе?

< / blockquote>

Нет, они работают так же, как и подъем. Единственное различие между ними заключается в том, что мусор const должен быть и может быть назначен только в части инициализации объявления (const one = 1;, как const one;, так и более поздние переназначения, такие как one = 2 являются недопустимыми).

1: var объявления все еще работают только на функциональном уровне, конечно

87
задан Bart Riordan 3 January 2017 в 00:11
поделиться

5 ответов

В JSX имена тегов нижнего регистра считаются HTML-тегами. Тем не менее, имена тегов в нижнем регистре с точкой (свойство accessor) не являются.

См. Теги HTML vs React Components .

  • <component /> компилируется в React.createElement('component') (html-тег)
  • <Component /> компилируется в React.createElement(Component)
  • <obj.component /> компилируется в React.createElement(obj.component)
128
ответ дан Alexandre Kirszenberg 17 August 2018 в 17:50
поделиться
  • 1
    Добавьте еще полчаса к стойке. Я сошел с ума, пытаясь сделать что-то вроде let component = components[compType]; <component/> и получить бессмысленные ошибки. – Zequez 16 October 2016 в 06:25
  • 2
    Я пробовал <components[name] />, который тоже не работает. – 李岡諭 19 October 2016 в 01:32
  • 3
    Я не могу поверить, что я не заметил, что существует такое правило раньше. – shaosh 16 February 2017 в 01:03
  • 4
    Это плохая идея. Я здесь вежлив. – Rolf 26 July 2018 в 23:48

Морфаус дал очень хороший ответ, просто хотел добавить еще одну деталь. React используется, чтобы содержать белый список известных имен элементов, таких как div и т. Д., Которые он использовал для разграничения между элементами DOM и компонентами React.

Но поскольку сохранение этого списка не так уж и забавно и поскольку веб-компоненты позволяют создавать пользовательские элементы, они сделали правило, что все компоненты React должны начинаться с буквы верхнего регистра или содержать точку.

33
ответ дан Anders Ekdahl 17 August 2018 в 17:50
поделиться
  • 1
    Спасибо, что объяснили рассуждения. – shaunakde 21 May 2015 в 12:42
  • 2
    отличная информация, еще лучше, если есть официальная ссылка на doc. Благодарю. – WaiKit Kung 2 September 2015 в 11:18
  • 3
    когда это изменилось? – nolawi petros 28 July 2017 в 23:57

Из официального справочного справки :

Когда тип элемента начинается с буквы в нижнем регистре, он ссылается на встроенный компонент, такой как или, и приводит к строка 'div' или 'span' передается в React.createElement. Типы, начинающиеся с заглавной буквы, такие как компиляция в React.createElement (Foo) и соответствуют компоненту, определенному или импортированному в ваш файл JavaScript.

Также обратите внимание:

Мы рекомендуем назначать компоненты с большой буквы. Если у вас есть компонент, который начинается с буквы в нижнем регистре, назначьте его капитализированной переменной перед использованием в JSX.

Это означает, что вам нужно использовать:

const Foo = foo; перед использованием foo в качестве компонента в JSX.

3
ответ дан Oleg 17 August 2018 в 17:50
поделиться

В JSX React Classes капитализируются для обеспечения совместимости с XML, так что это не ошибочно для HTML-тега. Если классы реагирования не заглавные, это HTML-тег как предопределенный синтаксис JSX.

1
ответ дан PKA 17 August 2018 в 17:50
поделиться

Первая часть тега JSX определяет тип элемента React, в основном есть какое-то соглашение. Заглавная, строчная, точка-нотация.

Типы заглавных и точечных обозначений указывают на то, что JSX ссылается на компонент React, поэтому, если вы используете компиляцию JSX <Foo /> для React.createElement(Foo) ИЛИ <foo.bar />, скомпилируете ее в React.createElement(foo.bar) и соответствуют компоненту, определенному или импортированному в ваш файл JavaScript.

В то время как тип нижнего регистра указывает на встроенный компонент, такой как <div> или <span>, и приводит к тому, что строка 'div' или 'span' передана в React.createElement('div').

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

2
ответ дан Umair Ahmed 17 August 2018 в 17:50
поделиться
Другие вопросы по тегам:

Похожие вопросы: