Краткое руководство по изучению React и того, как работает его Virtual DOM

kratkoe rukovodstvo po izucheniyu react i togo kak rabotaet ego

Содержание статьи

Это часть моей серии «React для начинающих», посвященная знакомству с React, его основным функциям и лучшим практикам, которых следует придерживаться. Будет больше статей!

Следующая статья >

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

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

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

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

<!-- Skipping all HTML5 boilerplate -->
<script src="
<script src="

<!-- For JSX support (with babel) -->
<script src=" charset="utf-8"></script> 

<div id="app"></div> <!-- React mounting point-->

<script type="text/babel">
  class Watch extends React.Component {
    render() {
      return <div>{this.props.hours}:{this.props.minutes}</div>;
    }
  }

  ReactDOM.render(<Watch hours="9" minutes="15"/>, document.getElementById('app'));
</script>

Игнорируйте шаблонный HTML и импорт зависимых скриптов (с unpkg, см. пример React). Несколько оставшихся строк на самом деле являются кодом React.

Сначала определите компонент Watch и его шаблон. Затем подключите React к DOM и попросите рендерить часы.

Ввести данные в компонент

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

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

Этот вид компонента React только с функцией рендеринга функциональная составляющая Они имеют более короткий синтаксис по сравнению с классами.

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

ReactDOM.render(<Watch hours="Hello" minutes="World"/>, document.getElementById('app'));

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

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

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

А как насчет HTML без кавычек?

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

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

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

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

// 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
<form>
  <div className="form-group">
    <label htmlFor="email">Email address</label>
    <input type="email" id="email" className="form-control"/>
  </div>
  <button type="submit" className="btn btn-primary">Submit</button>
</form>

Идем дальше с Virtual DOM

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

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

Многие фреймворки, такие как React и Vue.js, обходят эту проблему. Они выдумали решение под заглавием Virtual DOM.

{
   "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":[]
     }
  ]
}

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

Уменьшение вызовов DOM API предполагает сохранение представления дерева DOM в памяти. Поскольку мы говорим о фреймворках JavaScript, выбор JSON звучит законно.

Такой подход немедленно отображает изменения в Virtual DOM.

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

Ты помнишь React.createElement ? На самом деле, эта функция (вызванная непосредственно или через JSX) создает новый узел в Virtual DOM.

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

Чтобы применить обновление, в игру вступает функция ядра Virtual DOM, алгоритм согласования.

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

Затем примените новый виртуальный DOM к настоящему DOM.

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

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

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

Как написать собственный виртуальный DOM‌‌

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

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

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

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

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