Быстрая руководство для изучения реагирования и как работает его виртуальный DOM

Автор оригинала: Jérémy Bardon.

Вы хотите научиться реагировать без ползания Документация (Хорошо написано кстати)? Вы нажали на правильную статью.

Мы узнаем, как запустить реагировать с одним HTML-файлом, а затем разоблачить себя первым фрагментом.

К концу вы сможете объяснить эти концепции: реквизит, функциональный компонент, JSX и Virtual DOM.

Цель состоит в том, чтобы сделать часы, которые демонстрируют часы и минуты. Реагистрационные предложения к архитектору наш код с компонентами. `Давайте создадим наш компонент часов.

Игнорировать HTML Boaterplate и Imports Script для зависимостей (с UNPKG см. Пример реакции ). Несколько оставшихся линий фактически реагируют код.

Во-первых, определите компонент часов и его шаблон. Затем крепление реагирует в домо и попросите оказать часы.

Загрузить данные в компонент

Наши часы довольно глупы, она отображает часы и минуты, которые мы предоставили этому.

Вы можете попытаться воспроизвести и изменить значение для этих свойств (называется реквизит в реакции). Он всегда будет отображать то, что вы просили, даже если это не цифры.

Этот вид реагирования компонента только с функцией рендеринга – Функциональный компонент. У них более краткий синтаксис по сравнению с классами.

const Watch = (props) =>
  {props.hours}:{props.minutes};

ReactDOM.render(, document.getElementById('app'));

Реквисы – это только данные, переданные в компонент, как правило, окружающим компонентом. Компонент использует реквизиты для бизнес-логики и рендеринга.

Но как только реквизиты не принадлежат к компоненту, они неизменный . Таким образом, компонент, прилагаемый реквизит, является единственным куском, способным обновлять значения реквизитов.

Использование реквизитов довольно просто. Создайте узел DOM с именем своего компонента в качестве имени тега. Затем дайте ему атрибуты, названные после реквизита. Тогда реквизиты будут доступны через Это .props в компоненте.

Как насчет Unquoted HTML?

Я уверен, что вы заметите, что Unquoted HTML возвращен оказывать функция. Этот код использует JSX Язык, это краткий синтаксис для определения шаблона HTML в компонентах реагирования.

// Equivalent to JSX: 
React.createElement(Watch, {'hours': '9', 'minutes': '15'});

Теперь вы можете избежать JSX, чтобы определить шаблон компонента. На самом деле, JSX выглядит как синтаксический сахар Отказ

Взгляните на следующий фрагмент, который показывает как JSX, так и реагирующий на синтаксис для создания вашего мнения.

// Using JS with React.createElement
React.createElement('form', null, 
  React.createElement('div', {'className': 'form-group'},
    React.createElement('label', {'htmlFor': 'email'}, 'Email address'),
    React.createElement('input', {'type': 'email', 'id': 'email', 'className': 'form-control'}),
  ),
  React.createElement('button', {'type': 'submit', 'className': 'btn btn-primary'}, 'Submit')
)

// Using JSX

  
    Email address

Идти дальше с виртуальным домом

Эта последняя часть более сложная, но очень интересная. Это поможет вам понять, насколько реагирован работает под капотом.

Обновление элементов на веб-странице (узел в дереве DOM) включает использование DOM API. Он перекрашит страницу, но она может быть медленной (см. Эта статья зачем).

Многие рамки, такие как Rection и Vue.js, обойти эту проблему. Они придумывают решение, называемое виртуальным домом.

{
   "type":"div",
   "props":{ "className":"form-group" },
   "children":[
     {
       "type":"label",
       "props":{ "htmlFor":"email" },
       "children":[ "Email address"]
     },
     {
       "type":"input",
       "props":{ "type":"email", "id":"email", "className":"form-control"},
       "children":[]
     }
  ]
}

Идея проста. Чтение и обновление дерева Дом очень дорого. Итак, сделайте как можно меньше изменений и обновите как можно меньше узлов.

Уменьшение вызовов на API DOM включает в себя сохранение представления дерева DOM в памяти. Так как мы говорим о JavaScript Frameworks, выбирая JSON LOWS LECTITAME.

Этот подход немедленно отражает изменения в виртуальном доме.

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

Вы помните Отреагировать ? На самом деле эта функция (называемая напрямую или через JSX) создает новый узел в виртуальном доме.

// React.createElement naive implementation (using ES6 features)
function createElement(type, props, ...children) {
  return { type, props, children };
}

Чтобы применить обновления, функция виртуальной DOM Core вступает в игру, Алгоритм примирения Отказ

Его работа состоит в том, чтобы придумать наиболее оптимизированное решение для устранения разницы между предыдущим и текущим виртуальным состоянием DOM.

А затем нанесите новый виртуальный дом до настоящего Дома.

Дальнейшие чтения

Эта статья находится далеко на реагирование на внутренние и виртуальные объяснения DOM. Тем не менее, важно немного знать о том, как работает каркас, при использовании ее.

Если вы хотите узнать, как работает виртуальный DOM в деталях, следуйте моим рекомендациям по чтению. Вы можете написать свой собственный виртуальный дом и Узнайте о доме рендеринга Отказ

Спасибо за чтение. Извините, если это слишком техническое для вашего первого шага в реакции. Но я надеюсь, что теперь вы знаете о том, какие реквизиты, функциональные компоненты, JSX и виртуальные дома являются.

Если вы нашли эту статью полезную, пожалуйста, нажмите на ? Кнопка несколько раз, чтобы сделать других найти статью и показать вашу поддержку! ?

Не забудьте следовать за мной, чтобы получить уведомление о моих предстоящих статьях ?

Проверьте мои другие статьи

➥ JavaScript

➥ Советы и трюки

Первоначально опубликовано в www.linkedin.com 6 февраля 2018 года.

Оригинал: “https://www.freecodecamp.org/news/a-quick-guide-to-learn-react-and-how-its-virtual-dom-works-c869d788cd44/”