JSX, понятно?

внешний интерфейс JavaScript Vue.js React.js
  • JSX — лошадка бога
    • написание спецификации
  • {} в JSX
    • Атрибуты
    • children
    • предотвратить xss
    • Другие соображения
  • JSX с одной записью
  • Разница между JSX и шаблонизатором
  • JSX — это описание настоящего DOM.

JSX — лошадка бога

JSXдаReactКитайские уникальные вещи, полное имяJavascriptのxml.

Это выглядит так

let jsx = <h1>hello</h1>;

Похоже на обычный HTML-тег, не так ли? Эм. . . Подожди. . . Посмотрите на левую сторону, мы присваиваем этот тег html переменной js!

what!?Что это за операция?

Эй, это то, что делает JSX. мы говоримJSXПолное название должно быть переведено какJavscriptのxml(xml в Javascript) без перевода вJavascript和xml, это потому, что по сравнению с тегом xml/html это больше похоже на расширение функции в javascript, которая присваивает xml как значение переменной переменной js, что правильнорасширение синтаксиса javascript.

Кроме того, если мы рассматриваем только внешний вид JSX, мы часто называем егоjsx tag.

написание спецификации

JSX поддерживает разрывы строк

let jsx = (
    <div>
    	<h1>hello</h1>
    </div>
)

должен быть в курсеСтарые версии ReactЕсли вы завернете и не принесете()В качестве комментария React автоматически=заполнить после;,сообщит об ошибке!

{} в JSX

{}может помочь нам лучше описатьJSX tagиз属性а такжеchildren.

Атрибуты

ОдинJSX tagОн также может иметь столько же атрибутов, сколько и элемент тега xml/html, например этот

let jsx = <img src='./xxx...'/>

Значением этого свойства может быть фиксированная строка или динамическая переменная js, но эта переменная js должна использовать{}Заверните. (Этот продукт называется усами во Vue)

let src = './1.jpg';
let jsx = <img src={src} />

children

Кроме того{}По сути, он может содержать любое JS-выражение (лишь бы есть возвращаемое значение, кроме возврата нативных js-объектов), даже расширенныеJSX tag.а также{}Может использоваться не только как значение свойства, но и какJSX tagдочерний элемент (текст или элемент).

let className = 'class1';
let src = './1.jpg';
let element2 = <img src={src} alt='1.jpg'/>;
let element = (
  <div className={className}>
    {element2} //<----看这里！！！
  </div>
);

Другие соображения

мы сказали{}Вы можете ставить только выражения, которые не являются выражениями, например

<div>{let i = 123;i}</div> //<---错误的示范！！！会报错

Кроме того{}Не размещайте объекты в JS, это будет ошибка

но{}помещен вnullОб ошибке не будет сообщено, установка нуля означает, что ничего не отображается.

предотвратить xss

{}Возвращается, если одинJSX, и это скрипт,{}Он будет автоматически преобразован в обычную строку, чтобы предотвратить внедрение скрипта.

JSX с одной записью

переменная js, ей все равно, что она принимаетJSX tagСодержит ли он другиеJSX tag, но у него есть принцип, что он может принять толькоОдинJSX tagкак вход.

Это означает, что если вы присвоите значение переменной js, которая у вас есть для JSX, она сообщит об ошибке.

let jsx = (
    <div></div>
    <img />
)

Разница между JSX и шаблонизатором

Подводя итог вышесказанному в JSX{}Пусть у него есть функция, похожая на механизм шаблонов, но он более мощный, чем механизм шаблонов, потому что является расширением синтаксиса javascript:

  • Вы можете использовать его как значение переменной и использовать его в циклах if и for.
  • Его также можно передать как параметр функции.
  • Он также может быть возвращен как возвращаемое значение функции.

JSX — это описание настоящего DOM.

Мы так много сказали выше, но на самом делеJSXЧто это означает? Представляет ли он элемент DOM?

Этот вид познания не очень безопасен, на самом деле это описание элемента DOM, а не самого элемента DOM.

сказал ранееJSX tagтакими они станут после компиляции

//编译前
let jsx = <h1 className="class1">hello</h1>
//编译后
React.createElement(
    'h1' //类型
    ,{className:'class1'} //标签属性键值对
    ,'hello' //children节点
)

и этоReact.createElementФункция чаще всего производит объект, мы называем егоReact对象или более высокое имя虚拟DOM.

{
  type: 'h1',
  props: {
    className: 'class1',
    children: 'hello'
  }
}

Этот элемент реакции представляет собой описание реального DOM, который необходимо сгенерировать, и React отобразит реальный элемент DOM в соответствии с описанием этого объекта.

Уведомление:Когда есть только один дочерний элемент, значением дочерних элементов является строка или объект, но когда есть несколько дочерних элементов, он становится массивом, и каждый массив хранит соответствующий дочерний элемент.

ToBeContinue...

Категории