Поговорите о загруженном вопросе. Между этим и последним постом был небольшой разрыв, и причина в том, что попытка свести React в один единственный пост оказалась более сложной задачей, чем я думал изначально. Что я должен включить? Это будет слишком много? Недостаточно? Итак, я приступаю к делу! В следующих постах я буду расширяться, так что перестану беспокоиться.

Давайте приступим к делу.

Я считаю, что иногда маркеры помогают мне лучше понять вещи, поэтому вот мой список того, что такое React.

React - это…

  • Интерфейсный фреймворк
  • Библиотека JavaScript для создания пользовательских интерфейсов
  • Состоит из компонентов (частей / частей), которые отделены друг от друга; Чтобы создать целое приложение, мы должны собрать компоненты вместе (также известные как «составлять компоненты» - звучит забавно, не так ли?), чтобы создать интерфейс.

NB: Компоненты можно использовать повторно!

  • Отвечает за рендеринг фактического пользовательского интерфейса
  • Фреймворк, который спрашивает: «Как изменится пользовательский интерфейс в зависимости от состояния компонентов?»

Три причины, по которым React великолепен

Вот что все это значит:

Многоразовые компоненты и компоненты с отслеживанием состояния. Компоненты в React очень похожи на простые функции: мы даем им некоторый ввод, а они дают нам вывод. Мы можем повторно использовать функции по мере необходимости и составлять более крупные функции из более мелких. Компоненты React имеют вход (свойства и состояние) и выход (пользовательский интерфейс).

NB: state - это данные в приложении. Чтобы обновить state компонента React, мы вызываем this.setState; вы можете добавить любой state к своему компоненту, и каждый state может иметь свой собственный компонент. Если state изменится внутри приложения, React повторно отрендерит пользовательский интерфейс, чтобы пользователь мог увидеть новый state. Кроме того, state является локальным для компонента, а не находится в DOM.

Свойства или props - это информация, которую вы передаете компоненту (это похоже на то, как вы передаете аргумент функции).

Реактивные обновления - React не зря называется «React». Когда один из входов в компоненте изменяется, интерфейс изменяется, чтобы отразить это. React обрабатывает обновление DOM за нас, так что нам не нужно! Он просто «реагирует» на то, что мы программируем.

Виртуальный DOM. Виртуальный DOM React действует как агент между разработчиком и реальной DOM. React отображает только то, что изменяется на странице, поэтому для реальной модели DOM работы меньше. Использование виртуальной модели DOM в больших приложениях почти всегда будет быстрее, чем использование реальной модели DOM, поскольку для этого не требуется, чтобы браузер вносил массу изменений. Пользователи не видят виртуальную модель DOM, что неплохо.

Вот забавный пример, который Кэссиди использует для объяснения виртуальной модели DOM:

Допустим, я хочу 100 буррито. Я мог бы приготовить все эти буррито на своей собственной кухне, что могло бы быть быстрее или медленнее, чем кто-то другой, но есть вероятность, что на моей кухне будет беспорядок; ИЛИ Я мог бы попросить кого-нибудь сделать это, и, в конце концов, он просто должен был бы доставить сотню буррито. В любом случае у меня есть 100 буррито.

Теперь, оставаясь с той же аналогией, допустим, у меня есть 40 буррито (не имеет значения, кто их сделал), и я хочу заказать 60. Сказать ли я заведению буррито: «Я хочу 100 буррито?» или я скажу: «У меня уже есть 40 буррито, дай мне 60». Очевидно, что наиболее разумно и экономически выгодно попросить 60 буррито. Таким образом, я получаю свои 100, и место для буррито не требует дополнительной работы.

Второй сценарий заключается в том, как работает виртуальная модель DOM: вы пишете код, чтобы интерфейс выглядел так, как вы хотите. Виртуальный DOM определяет разницу между этим и тем, как он в настоящее время выглядит в DOM браузера; он обновляет только то, что нужно обновить.

Самое замечательное в React то, что он находится в одном блоке div в теле вашего веб-приложения. Помимо потрясающих функций библиотеки, ее популярность росла благодаря тому, что она легко вписывалась в существующие приложения.

Посмотрите этот пример, и я объясню, что он делает:

Строки 1–2: Import React
Строка 4: Создает компонент под названием App
Строка 5: Вызывается метод рендеринга
Строка 7: Div с возвращенным className of App

NB: class - зарезервированное слово в JavaScript, поэтому в React мы используем вместо него className.

Строка 8–9: h1 и div - это то, что выводится на наш экран
Строка 15: React.DOM - это то, что на самом деле отображает компонент App внутри элемента с идентификатором root.

И вот как это будет выглядеть в браузере:

Прелесть React в том, что мы можем создать целый html-документ внутри этого div root.

Хорошо, теперь перейдем к JSX!

JSX - это строго типизированный объектно-ориентированный язык программирования, который компилируется в JavaScript и предназначен для работы в современных веб-браузерах. Он разработан, чтобы быть быстрее, безопаснее и проще, чем обычный JavaScript. Что касается React, он добавляет шаблоны для компонентов и множество мощных функций, упрощающих разработку. Например, в React приведенный ниже код полностью подходит для создания div с изображением и подписью под ним; React.createElement является фундаментальным строительным блоком, и он создает каждую деталь.

Внутри элемента React.createElement находятся три аргумента. Первый (розовый) - это то место, где мы передаем имя тега; здесь мы сообщаем коду, какой тип элемента мы хотим создать. Второй аргумент (зеленый) определяет свойства элемента. В нашем случае null означает, что у нас нет свойств, которые мы хотим передать. Третий аргумент (синий) представляет всех дочерних элементов, которые должны иметь наш элемент.

Ненавижу переворачивать все, что я только что объяснил, с ног на голову НО! Оказывается, вы можете сделать то же самое с шаблонами, которые есть в JSX:

Разве это не круто ?! JSX удаляет много повторов, поэтому нам легче запомнить, как его использовать, поскольку он очень похож на HTML.

NB: Если вы пойдете на собеседование, есть большая вероятность, что они захотят, чтобы вы поняли, во что трансформируется * JSX (на позапрошлом скриншоте это элементы createElement)

* Транспилирование - это процесс, с помощью которого ES6 преобразуется в ES5, чтобы ваш браузер мог прочитать ваш код. Насколько я понимаю, многие ребята из React любят использовать Babel в качестве транспилятора.

Нужна дополнительная информация о транспиляции? В моем предыдущем посте об этом рассказывается подробнее!

В конце концов, нужно помнить две важные вещи:

  • Состояние ваших компонентов
  • Как пользовательский интерфейс выглядит в зависимости от этого состояния

Я уверен, что по мере того, как я буду продвигаться, сорняки станут больше, но это то, что у меня есть!

Далее, методы жизненного цикла компонентов :)