Знакомство с JSX
Это JSX — расширение языка JavaScript. Мы рекомендуем использовать его, когда требуется объяснить React, как должен выглядеть UI. JSX напоминает язык шаблонов, наделённый силой JavaScript.
JSX производит «элементы» React. То, как элементы рендерятся в DOM, мы изучим в следующей главе, а ниже мы рассмотрим основы JSX, которые нужно знать начинающему.
React исходит из принципа, что логика рендеринга неразрывно связана с прочей логикой UI: с тем, как обрабатываются события, как состояние изменяется во времени и как данные готовятся к отображению.
Вместо того, чтобы искусственно разделить технологии, помещая разметку и логику в разные файлы, React разделяет ответственность с помощью слабо связанных единиц, называемых «компоненты», которые содержат и разметку, и логику. Мы ещё вернёмся к теме компонентов в следующей главе, но если идея держать разметку в JavaScript-коде всё ещё вызывает у вас дискомфорт, этот доклад может переубедить вас.
React можно использовать и без JSX, но большинство людей ценит его за наглядность при работе с UI, живущем в JavaScript-коде. Помимо этого, JSX помогает React делать сообщения об ошибках и предупреждениях понятнее.
С этим разобрались. Поехали дальше!
Встраивание выражений в JSX
В следующем примере мы объявляем переменную name и затем используем её внутри JSX, обрамляя фигурными скобками:
const name = 'Иван-Царевич';const element = h1>Здравствуй, name>!h1>;JSX допускает использование любых корректных JavaScript-выражений внутри фигурных скобок. Например, 2 + 2 , user.firstName и formatName(user) являются допустимыми выражениями.
В примере ниже мы встраиваем результат вызова JavaScript-функции formatName(user) в элемент :
function formatName(user) return user.firstName + ' ' + user.lastName; > const user = firstName: 'Марья', lastName: 'Моревна' >; const element = ( h1> Здравствуй, formatName(user)>! h1> );Чтобы улучшить читаемость, мы разбили JSX на несколько строк. В таких случаях, хотя это и не обязательно, мы советуем заключать всё выражение целиком в круглые скобки, чтобы избежать проблем, связанных с автоматической вставкой точек с запятой.
JSX это тоже выражение
После компиляции каждое JSX-выражение становится обычным вызовом JavaScript-функции, результат которого — объект JavaScript.
Из этого следует, что JSX можно использовать внутри инструкций if и циклов for , присваивать переменным, передавать функции в качестве аргумента и возвращать из функции.
function getGreeting(user) if (user) return h1>Здравствуй, formatName(user)>!h1>; > return h1>Здравствуй, незнакомец.h1>;>Использование атрибутов JSX
Чтобы использовать строковый литерал в качестве значения атрибута, используются кавычки:
const element = a href="https://www.reactjs.org"> link a>;Если же в значении атрибута требуется указать 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>Здравствуйте!h1> h2>Рады вас видеть.h2> div> );JSX предотвращает атаки, основанные на инъекции кода
Данные, введённые пользователем, можно безопасно использовать в JSX:
const title = response.potentiallyMaliciousInput; // Этот код безопасен: const element = h1>title>h1>;По умолчанию React DOM экранирует все значения, включённые в JSX перед тем как отрендерить их. Это гарантирует, что вы никогда не внедрите чего-либо, что не было явно написано в вашем приложении. Всё преобразуется в строчки, перед тем как быть отрендеренным. Это помогает предотвращать атаки межсайтовым скриптингом (XSS).
JSX представляет собой объекты
Babel компилирует JSX в вызовы React.createElement() .
Следующие два примера кода эквивалентны между собой:
const element = ( h1 className="greeting"> Привет, мир! h1> );const element = React.createElement( 'h1', className: 'greeting'>, 'Привет, мир!' );React.createElement() проводит некоторые проверки с целью выявить баги в коде, но главное — создаёт объект похожий на такой:
// Примечание: этот код несколько упрощён. const element = type: 'h1', props: className: 'greeting', children: 'Привет, мир!' > >;Эти объекты называются React-элементами. Можно сказать, что они описывают результат, который мы хотим увидеть на экране. React читает эти объекты и использует их, чтобы конструировать и поддерживать DOM.
В следующей главе мы углубимся в то, как React-элементы рендерятся в DOM.
Совет:
Мы рекомендуем настроить ваш редактор кода для использования Babel, чтобы и ES6, и JSX-код были подсвечены должным образом.
JSX — JS: React
С одной стороны, JSX — это такая же простая вещь, как и голый HTML. Нужно запомнить, как он собирается и всё. С другой стороны, он встроен в сам JS и может с ним взаимодействовать. Другими словами, получается шаблонизация прямо в языке программирования (да-да, так работает PHP). Именно это смешение с JS вызывает больше всего вопросов у новичков. Попробуем с ними разобраться.
Для лучшего понимания происходящего, проверьте во что транслируется код этого урока в онлайн компиляторе https://babeljs.io/repl
Любой текст, записанный внутри тегов (далее они будут так называться для простоты), остаётся просто статическим текстом на выводе. А что делать, если нужно вставить значение переменной? Ответ ниже:
const name = 'Eva'; const cname = 'container'; const vdom1 = div>Hello, name>div>; const vdom2 = div>Hello, name.repeat(3)>div>; const vdom3 = div className=cname>>Hello!div>; Как видно, вставка (по сути — интерполяция) происходит за счёт использования фигурных скобок, причём внутри них может быть любое выражение. Эта схема работает одинаково как для содержимого тегов, так и для атрибутов.
Кроме того, сами JSX-элементы являются выражениями, то есть вы можете использовать их в любых местах JS-кода, которые работают с выражениями:
const name = 'Mike'; const vdom = block ? div>hello, name>div> : span>i am spanspan>; Теперь всё вместе. Сам JSX — это выражение, а чтобы встроить выражение на JS внутрь JSX нужно использовать фигурные скобки. Следовательно, вы можете встроить JSX внутрь самого JSX пока вы пишете JSX:
const vdom = div> isAdmin ? p>a href="#">text>a>p> : p>text>p>> Hello /> div>; Другими словами, JSX, как и любой язык программирования, имеет рекурсивную структуру. Вы можете вкладывать одни выражения в другие до бесконечности. В этом нет ничего удивительного, ведь JSX — это тот же код на JS, записанный особым образом.
Чтобы окончательно закрепить эту тему, взгляните на следующий код:
div id=if (condition) 'msg' >>>Hello World!div> Этот код не заработает по очевидной причине. Условная конструкция в JS — инструкция, а не выражение. В результате компиляции предыдущего кода получится:
React.createElement("div", id: if (condition) 'msg' >>, "Hello World!"); И это, вероятно, самое большое неудобство: невозможность использовать условную конструкцию внутри JSX. Хотя вы по-прежнему можете использовать тернарную операцию или, в более сложных случаях, делать так:
let button; if (loggedIn) button = LogoutButton />; > else button = LoginButton />; > return ( nav> Home /> button> nav> ); Композиция
Как уже говорилось в прошлом уроке, все теги React по сути являются встроенными компонентами, которые работают точно так же, как и определённые вами. А значит все, что применимо к самописным компонентам, также применимо и ко встроенным. Обратное тоже верно. На практике это означает, например, возможность комбинирования компонентов:
const vdom = ( div> Hello /> Hello /> AnotherComponent> p>What is lovep> AnotherComponent> div> ); В примере выше компоненты, записанные с заглавной буквы, — самописные, остальные — встроенные. Это разделение не случайно: React требует, чтобы вновь создаваемые компоненты начинались с большой буквы, что соответствует стандарту именования классов в JS.
Null
В реальной практике возникают ситуации, когда наличие того или иного компонента в DOM зависит от некоторых условий. Например, если в компонент не передали текст, то и не надо выводить соответствующий кусок. Пример:
const header = text ? h1>text>h1> : null; const vdom = ( div> header> Hello /> div> ); const vdom = ( div> text ? h1>text>h1> : null> Hello /> div> ); То есть null — это допустимое значение, которое рассматривается React как пустой компонент. Точно также интерпретируются false , true и undefined . Поэтому пример выше можно переписать еще короче.
const vdom = ( div> text && h1>text>h1>> Hello /> div> ); Комментарии
JSX не поддерживает комментарии напрямую, но их можно эмулировать, используя JavaScript. Для этого достаточно вставить блок кода, внутри которого однострочный JavaScript комментарий:
/* A JSX comment */> То же самое для многострочного комментария:
/* Multi line Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
Что такое JSX в React
Новички в React, вероятно, путаются в том, почему мы пишем HTML внутри JavaScript.
React без JSX
Давайте напишем React код без использования JSX, чтобы мы могли лучше знать, почему мы используем JSX в React.
let h1 = React.createElement('h1',>," h1 element"); let p = React.createElement('p',>,"p element"); let div = React.createElement('div',,h1,p); ReactDOM.render(div,document.querySelector('#app'))React.createElement(type,props,children) принимает три аргумента. type : Это означает тип HTML-элемента, который нам нужен. (Пример: h1 , h2 , p , div и т.д.) props : Любые пропсы, необходимые для этого элемента. children : Данные, которые нам нужно добавить внутрь элемента html (пример: обычный текст или дочерние элементы)
React с JSX
Теперь заменим приведенный выше код на код с JSX.
let green = ; let red = ; let h1 =>h1 element; let p =
>p element
; let div =ReactDOM.render(div,document.querySelector('#app'))
JSX, который мы пишем внутри React, часто преобразуется в JavaScript с помощью транспилятора babel.
Что такое JSX?
JSX позволяет нам писать HTML-синтаксис внутри JavaScript. Используя JSX, мы можем сделать наш код более читабельным. JSX используется не только в React, но и в некоторых других фреймворках.
Выражения в JSX
В JSX мы можем встраивать выражения JavaScript, обернув фигурными скобками < >.
let h1 = Odd numberВ приведенном выше коде мы использовали метод map для перебора массива и создали три элемента li .
Атрибуты в JSX
Встроенные (инлайновые) стили
// объект let greenColor = let h1 =>This is heading
Для встроенного стиля нам нужно передать свойства стиля как объект внутри фигурных скобок, так как объект является выражением JavaScript. Мы также можем передать объект стиля непосредственно в фигурные скобки вместо использования дополнительной переменной.
let h1 =>>This is heading
Внешние стили, использующие classNames
Нам нужно использовать className вместо обычного атрибута class , который мы используем в HTML, потому что внутри JavaScript уже присутствует ключевое слово class .
let h1 =This is heading
Компоненты React
Компонент представляет собой многократно используемый фрагмент кода в React, который возвращает React элемент.
function Button(props) < return >Условные выражения в JSX
function ShowHide(props) < if(props.show) < return > else < return > > ReactDOM.render(,document.querySelector('#app'))Мы можем упростить приведенный выше код, используя тернарный оператор.
function ShowHide(props) < return >Оператор spread в JSX
Предположим, нам нужно передать данные компоненту User с помощью пропсов.
Передадим те же пропсы с помощью оператора spread.
let user = < name: "John", email: "user@example.com", mobile: 11233 > />Передача данных между компонентами в React
месяц назад · 6 мин. на чтение
Иногда нужно, чтобы состояние двух компонентов всегда менялось вместе. Для этого нужно удалить их собственное состояние, переместить его к их ближайшему общему родителю, а затем передать его им через пропсы. Это известно как поднятие состояния вверх, и это одна из самых распространенных вещей, которые вы будете делать при написании React кода.
Содержание туториала по React Иногда нужно, чтобы состояние двух компонентов всегда менялось вместе. Для этого нужно удалить их собственное состояние, переместить его к их ближайшему общему родителю, а затем передать его им через пропсы. Это известно как поднятие состояния вверх, и это одна из самых распространенных вещей, которые вы будете делать при написании React кода.
Поднятие состояния на примере
- Accordion
- Panel
- Panel
import < useState >from 'react'; function Panel(< title, children >) < const [isActive, setIsActive] = useState(false); return () : ( )> ); > export default function Accordion() < return ( <>Almaty, Kazakhstan
With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city. The name comes from алма, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple. ); >- Удалить состояние из дочерних компонентов.
- Передать захардкоженные данные от общего родителя.
- Добавить состояние к общему родителю и передать его вместе с обработчиками событий.
Шаг 1: Удалить состояние из дочерних компонентов
Вы передадите контроль над isActive панели ее родительскому компоненту. Это означает, что вместо этого родительский компонент будет передавать isActive в Panel в качестве пропса. Начните с удаления этой строки из компонента Panel :
const [isActive, setIsActive] = useState(false);Вместо этого добавьте isActive в список пропсов Panel :
function Panel(< title, children, isActive >)Теперь родительский компонент компонента Panel может управлять isActive , передавая его как проп. И наоборот, компонент Panel теперь не имеет контроля над значением isActive — теперь это зависит от родительского компонента.
Шаг 2. Передать захардкоженные данные от общего родителя
- Accordion (ближайший общий родитель)
- Panel
- Panel
import < useState >from 'react'; export default function Accordion() < return ( <>Almaty, Kazakhstan
> With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city. > The name comes from алма, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple. ); > function Panel(< title, children, isActive >) < return () : ( )> ); >Шаг 3: Добавить состояние к общему родителю
Поднятие состояния часто меняет характер того, что вы храните как состояние. При этом одновременно должна быть активна только одна панель. Это означает, что общий родительский компонент Accordion должен отслеживать, какая панель является активной. Вместо булевского значения он может использовать число в качестве индекса активной панели для переменной состояния:
const [activeIndex, setActiveIndex] = useState(0);Когда activeIndex равен 0 , активна первая панель, а когда 1 — вторая. При нажатии кнопки «Показать» на любой из панелей необходимо изменить активный индекс в Accordion . Panel не может установить состояние activeIndex напрямую, потому что оно определено внутри Accordion . Компонент Accordion должен явно разрешить компоненту Panel изменять свое состояние, передав обработчик событий в качестве пропса:
<>onShow= <() =>setActiveIndex(0)>> . onShow= <() =>setActiveIndex(1)>> . import < useState >from 'react'; export default function Accordion() < const [activeIndex, setActiveIndex] = useState(0); return ( <>Almaty, Kazakhstan
onShow= <() =>setActiveIndex(0)> > With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city. onShow= <() =>setActiveIndex(1)> > The name comes from алма, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple. ); > function Panel(< title, children, isActive, onShow >) < return (: > ); >Это завершает подъем состояния вверх. Перемещение состояния в общий родительский компонент позволило согласовать две панели. Использование активного индекса вместо двух флажков «показано» гарантировало, что в данный момент активна только одна панель. А передача обработчика событий дочернему компоненту позволяла дочернему компоненту изменять состояние родителя.
Управляемые и неуправляемые компоненты
Обычно компонент с некоторым локальным состоянием называют "неуправляемым". Например, исходный компонент Panel с переменной состояния isActive не контролируется, поскольку его родитель не может влиять на то, активна панель или нет. Напротив, вы можете сказать, что компонент "управляется", когда важная информация в нем управляется пропсами, а не его собственным локальным состоянием. Это позволяет родительскому компоненту полностью определять свое поведение. Последний компонент Panel с пропсом isActive управляется компонентом Accordion . Неуправляемые компоненты проще использовать в своих родительских компонентах, поскольку они требуют меньшей настройки. Но они менее гибкие, когда вы хотите скоординировать их вместе. Управляемые компоненты максимально гибкие, но требуют от родительских компонентов полной настройки их пропсами. На практике «управляемый» и «неуправляемый» не являются строгими техническими терминами — каждый компонент обычно имеет некоторое сочетание локального состояния и свойств. Тем не менее, это полезный способ рассказать о том, как устроены компоненты и какие возможности они предлагают. При написании компонента учитывайте, какая информация в нем должна управляться (через пропсы), а какая информация не должна управляться (через состояние). Но вы всегда можете передумать и провести рефакторинг позже.
Единый источник правды для каждого состояния
В React приложении многие компоненты будут иметь собственное состояние. Некоторое состояние может «жить» рядом с компонентами-листьями (компонентами в нижней части дерева), такими как инпуты ( ). Другое состояние может «жить» ближе к верху приложения. Например, даже клиентские библиотеки маршрутизации обычно реализуются путем сохранения текущего маршрута в состоянии React и передачи его в пропсах Для каждой уникальной части состояния вы выберете компонент, который «владеет» им. Этот принцип также известен как наличие «единого источника истины». Это не означает, что все состояния хранятся в одном месте, но для каждой части состояния существует определенный компонент, который содержит эту часть информации. Вместо того, чтобы дублировать общее состояние между компонентами, вы поднимете его до их общего общего родителя и передадите его дочерним элементам, которым оно нужно. Ваше приложение будет меняться по мере того, как вы будете над ним работать. Обычно вы перемещаете состояние вниз или назад, пока вы все еще выясняете, где «живет» каждая часть состояния. Это все часть процесса. Чтобы увидеть, как это выглядит на практике с еще несколькими компонентами, прочитайте статью Мышление в стиле React.
Резюме
- Если вы хотите скоординировать два компонента, переместите их состояние в их общий родитель.
- Затем передайте информацию через пропсы от их общего родителя.
- Наконец, передайте обработчики событий, чтобы потомки могли изменить состояние родителя.
- Полезно рассматривать компоненты как «управляемые» (управляемые пропсами) или «неуправляемые» (управляемые состоянием).
- Таким образом можно выделить такие случаи передачи данных в React:
- от родительского компонента к дочернему;
- от дочернего компонента к родительскому;
- между соседними компонентами;
- от компонента к компоненту-потомку (через несколько уровней вниз);
- от компонента к компоненту-предку (через несколько уровней вверх).
Jsx что это
React (иногда React.js или ReactJS) — JavaScript-библиотека с открытым исходным кодом для разработки пользовательских интерфейсов.
React разрабатывается и поддерживается Facebook, Instagram и сообществом отдельных разработчиков и корпораций.
React может использоваться для разработки одностраничных и мобильных приложений. Его цель — предоставить высокую скорость, простоту и масштабируемость. В качестве библиотеки для разработки пользовательских интерфейсов React часто используется с другими библиотеками, такими как Redux.
Особенности
Однонаправленная передача данных
Свойства передаются от родительских компонентов к дочерним. Компоненты получают свойства как множество неизменяемых (англ. immutable) значений, поэтому компонент не может напрямую изменять свойства, но может вызывать изменения через callback функции. Такой механизм называют «свойства вниз, события наверх».
Виртуальный DOM
React использует виртуальный DOM (англ. virtual DOM). React создает кэш структуру в памяти, что позволяет вычислять разницу между предыдущим и текущим состояниями интерфейса для оптимального обновления DOM браузера. Таким образом программист может работать со страницей, считая, что она обновляется вся, но библиотека самостоятельно решает, какие компоненты страницы необходимо обновить.
JSX
JavaScript XML (JSX) — это расширение синтаксиса JavaScript, которое позволяет использовать похожий на HTML синтаксис для описания структуры интерфейса. Как правило, компоненты написаны с использованием JSX, но также есть возможность использования обычного JavaScript [12] . JSX напоминает другой язык, созданный в компании Фейсбук для расширения PHP, XHP .
Методы жизненного цикла
Методы жизненного цикла позволяют разработчику запускать код на разных стадиях жизненного цикла компонента. Например:
- shouldComponentUpdate— позволяет предотвратить перерисовку компонента с помощью возврата false, если перерисовка не необходима.
- componentDidMount— вызывается после первой отрисовки компонента. Он часто используется для запуска получения данных с удаленного источника через API.
- render— является важнейшим методом жизненного цикла. Каждый компонент должен иметь этот метод. Обычно этот метод вызывается при изменении данных компонента для перерисовки данных в интерфейсе.
Не только отрисовка HTML в браузере
React используется не только для отрисовки HTML в браузере. Например, Facebook имеет динамические графики, которые отрисовываются в теги . Netflix и PayPal используют изоморфные загрузки для отрисовки идентичного HTML на сервере и клиенте.