Рассмотрим это объявление переменной:
const element = <h1>Hello, world!</h1>;
Синтаксис этого тега не является ни строкой, ни HTML. Он называется JSX, и это расширение синтаксиса JavaScript. Рекомендуется использовать его с React для описания того, как должен выглядеть пользовательский интерфейс. JSX может напомнить вам о языке шаблонов, но он поставляется с полной мощью JavaScript. JSX создает «элементы» React.
Почему JSX?
Реагирует на то, что логика визуализации по сути связана с другой логикой пользовательского интерфейса: как обрабатываются события, как изменяется состояние со временем и как данные подготовлены для отображения.
Вместо того, чтобы искусственно отделять технологии , добавляя разметку и логику в отдельные файлы, React разделяет проблемы с слабо связанными элементами, называемыми «компонентами», которые содержат оба.
React не требует использования JSX, но большинство людей считают его полезным в качестве наглядного пособия при работе с пользовательским интерфейсом внутри кода JavaScript. Он также позволяет React показывать более полезные сообщения об ошибках и предупреждения.
Встраивание выражений в JSX
Вы можете встроить любое выражение JavaScript в JSX, обернув его фигурными фигурными скобками.
Так, например, 2 + 2, user.firstName и formatName(user) все действительные выражения:
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
JSX - это выражение тоже
После компиляции выражения JSX становятся регулярными вызовами функций JavaScript и оцениваются для объектов JavaScript. Это означает, что вы можете использовать JSX внутри ifоператоров и forциклов, назначать его переменным, принимать его как аргументы и возвращать из функций:
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
Определение атрибутов с помощью JSX
Вы можете использовать кавычки для указания строковых литералов в качестве атрибутов:
const element = <div tabIndex="0"></div>;
Вы также можете использовать фигурные скобки для вставки выражения JavaScript в атрибут:
const element = <img src={user.avatarUrl}></img>;
Не помещайте кавычки вокруг фигурных скобок при встраивании выражения JavaScript в атрибут. Вы должны либо использовать кавычки (для строковых значений), либо фигурные скобки (для выражений), но не оба в одном и том же атрибуте.
Предупреждение:
Поскольку JSX ближе к JavaScript, чем к HTML, React DOM использует camelCaseсоглашение об именовании свойств вместо имен атрибутов HTML. Например, classстановится classNameв JSX и tabindexстановится tabIndex.
Определение детей с помощью JSX
Если тег пуст, вы можете немедленно его закрыть />, например XML:
const element = <img src={user.avatarUrl} />;
Теги JSX могут содержать дочерние элементы:
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
JSX предотвращает инъекционные атаки
Безопасно встраивать пользовательский ввод в JSX:
const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;
По умолчанию React DOM избегает любых значений, встроенных в JSX, перед их рендерингом. Таким образом, он гарантирует, что вы никогда не сможете вводить все, что явно не написано в вашем приложении. Перед преобразованием все преобразуется в строку. Это помогает предотвратить атаки XSS (межсайтовые скрипты) .
JSX представляет объекты
Babel компилирует JSX до React.createElement() вызовы. Эти два примера идентичны:
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElement() выполняет несколько проверок, чтобы помочь вам писать код без ошибок, но по существу он создает такой объект:
// Note: this structure is simplified
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
Эти объекты называются элементами «Реагировать». Вы можете думать о них как о описаниях того, что вы хотите видеть на экране. React читает эти объекты и использует их для построения DOM и обновления его.
0 комментариев