
Содержание статьи
Это часть моей серии «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, его основным функциям и лучшим практикам, которых следует придерживаться.
Следующая статья >
Просмотрите другие мои статьи
➥ JavaScript
➥ Советы и подсказки
Впервые опубликовано на www.linkedin.com 6 февраля 2018 г.