@thefourtheye верно, говоря, что эти переменные не могут быть доступны до их объявления. Однако это немного сложнее.
Не были ли объявлены переменные, объявленные с
blockquote>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, которое вызывается слишком рано).
Есть ли разница между
< / blockquote>let
иconst
в этом вопросе?Нет, они работают так же, как и подъем. Единственное различие между ними заключается в том, что мусор
const
должен быть и может быть назначен только в части инициализации объявления (const one = 1;
, какconst one;
, так и более поздние переназначения, такие какone = 2
являются недопустимыми).1:
var
объявления все еще работают только на функциональном уровне, конечно
В JSX имена тегов нижнего регистра считаются HTML-тегами. Тем не менее, имена тегов в нижнем регистре с точкой (свойство accessor) не являются.
См. Теги HTML vs React Components .
<component />
компилируется в React.createElement('component')
(html-тег) <Component />
компилируется в React.createElement(Component)
<obj.component />
компилируется в React.createElement(obj.component)
Морфаус дал очень хороший ответ, просто хотел добавить еще одну деталь. React используется, чтобы содержать белый список известных имен элементов, таких как div
и т. Д., Которые он использовал для разграничения между элементами DOM и компонентами React.
Но поскольку сохранение этого списка не так уж и забавно и поскольку веб-компоненты позволяют создавать пользовательские элементы, они сделали правило, что все компоненты React должны начинаться с буквы верхнего регистра или содержать точку.
Из официального справочного справки :
Когда тип элемента начинается с буквы в нижнем регистре, он ссылается на встроенный компонент, такой как или, и приводит к строка 'div' или 'span' передается в React.createElement. Типы, начинающиеся с заглавной буквы, такие как компиляция в React.createElement (Foo) и соответствуют компоненту, определенному или импортированному в ваш файл JavaScript.
blockquote>Также обратите внимание:
Мы рекомендуем назначать компоненты с большой буквы. Если у вас есть компонент, который начинается с буквы в нижнем регистре, назначьте его капитализированной переменной перед использованием в JSX.
blockquote>Это означает, что вам нужно использовать:
const Foo = foo;
перед использованиемfoo
в качестве компонента в JSX.
В JSX React Classes капитализируются для обеспечения совместимости с XML, так что это не ошибочно для HTML-тега. Если классы реагирования не заглавные, это HTML-тег как предопределенный синтаксис JSX.
Первая часть тега 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
.
let component = components[compType]; <component/>
и получить бессмысленные ошибки. – Zequez 16 October 2016 в 06:25<components[name] />
, который тоже не работает. – 李岡諭 19 October 2016 в 01:32