Стоит ли использовать React для вашего следующего веб-сайта?
В последние годы популярность React резко возросла. Описанный как «библиотека JavaScript для создания пользовательских интерфейсов», декларативный подход React к рендерингу упрощает создание сложных пользовательских интерфейсов.
React — это универсальный инструмент с широким спектром приложений, от традиционных веб-сайтов до сложных веб-приложений. Нет четкой линии, определяющей, когда следует использовать React. Вместо этого есть ориентировочные индикаторы, которые могут помочь вам оценить, подходит ли React.
Ищите компоненты
Одним из признаков того, что сайт может выиграть от React, является то, что вы планируете повторно использовать большое количество автономных компонентов. Абстрактные элементы интерфейса, такие как элементы управления формы и карты отображения данных, являются первыми кандидатами на преобразование в компоненты React. Это особенно верно, если ваши компоненты, вероятно, будут включать настраиваемое поведение помимо того, что предоставляет браузер.
Сама природа React побуждает вас изолировать повторно используемые аспекты вашего интерфейса в отдельные компоненты. Компоненты обычно определяются в своих собственных исходных файлах, что упрощает навигацию и организацию базы кода.
import React from "react";
import ReactDOM from "react-dom";
class ChildComponent extends React.Component {
render() {
return <h2>Child Component</h2>;
}
}
class DemoComponent extends React.Component {
render() {
return (
<div>
<h1>Demo Component</h1>
<ChildComponent />
</div>
);
}
}
ReactDOM.render(<DemoComponent />, document.body);
Компоненты могут включать в себя другие компоненты, чтобы обеспечить быстрое создание сложных пользовательских интерфейсов. Один компонент может отображать некоторый пользовательский интерфейс, применять пользовательские стили CSS и обрабатывать взаимодействия с пользователем на основе JavaScript. React использует собственный язык шаблонов JSX, позволяющий создавать компонентные пользовательские интерфейсы в стиле, похожем на обычный HTML.
Найти разделы с состоянием
React отлично справляется с управлением областями вашего интерфейса, которые отображаются по-разному в зависимости от значения некоторого внутреннего состояния. Поначалу понятие «государство» может показаться расплывчатым. Однако легко идентифицировать разделы вашего сайта с состоянием — обычно это области, которые вызывают изменения в пользовательском интерфейсе.
Примеры включают значение ввода формы, выбрана ли кнопка-переключатель и состояние загрузки динамически загружаемого содержимого. Сам контент часто доставляется «с сохранением состояния» — общий экран сообщения в блоге будет отображать данные статьи, хранящиеся во внутреннем состоянии компонента.
В приведенном ниже примере текст на экране определяется значением ключа demo в состоянии компонента. Текст меняется автоматически каждые пять секунд путем обновления состояния.
import React from "react";
import ReactDOM from "react-dom";
class DemoComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
demo: 1
};
this.timer = null;
this.updateText = this.updateText.bind(this);
}
componentDidMount() {
this.timer = setInterval(this.updateText, 5000);
}
componentWillUnmount() {
if (this.timer) clearInterval(this.timer);
}
updateText() {
this.setState({demo: (this.state.demo + 1)})
}
render() {
return <h1>{this.state.demo}</h1>;
}
}
ReactDOM.render(<DemoComponent />, document.body);
Попробуйте найти области вашего веб-сайта, которые должны динамически меняться. Это может быть следствием действия пользователя, повторяющегося таймера или события браузера (например, перехода в автономный режим или получения новых фоновых данных).
Любой раздел с состоянием, который регулярно обновляется, вероятно, выиграет от использования React. Бесшовное управление состоянием React обеспечивает единый источник правды для бизнес-логики вашего сайта.
Определить интерактивность
React может упростить управление интерактивностью на вашем веб-сайте. Библиотека абстрагирует встроенные обработчики событий JavaScript, чтобы обеспечить унифицированный интерфейс для реагирования на действия пользователя.
Использование React может быть особенно полезным в случае сложных форм. Его подход, основанный на «управляемых компонентах», гарантирует, что внутреннее состояние формы соответствует тому, что пользователь видит в пользовательском интерфейсе.
import React from "react";
import ReactDOM from "react-dom";
class DemoComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
value: "I'm a text field"
};
this.updateValue = this.updateValue.bind(this);
}
updateValue(e) {
this.setState({value: e.target.value});
}
render() {
return <input onChange={this.updateValue} value={this.state.value} />;
}
}
ReactDOM.render(<DemoComponent />, document.body);
Прикрепляя обработчики событий к элементам управления формы, вы можете обновлять состояние компонента всякий раз, когда пользователь изменяет значение элемента управления, например, вводя текстовое поле или выбирая параметр из раскрывающегося меню. Затем сделайте так, чтобы свойство value элемента управления (которое сопоставляется с HTML-атрибутом value) ссылалось на состояние компонента. Изменения в пользовательском интерфейсе и компоненте теперь будут отражаться друг в друге.
Ищите манипуляции с DOM
Это золотое правило, которое следует учитывать при принятии решения об использовании React. Контент с отслеживанием состояния, взаимодействие с пользователем и динамически обновляемые компоненты возвращаются обратно в модель DOM. Прямые манипуляции с DOM с использованием API-интерфейсов JavaScript браузера в лучшем случае неуклюжи, а в худшем — кошмарно громоздки.
Любой аспект вашего веб-сайта, который требует обширных манипуляций с DOM — это HTML-элементы, отображаемые на странице, — является вероятным источником сложности. React может значительно упростить эти сценарии. Его компонентная природа позволяет абстрагироваться от утомительного внедрения HTML и управления привязками событий.
Поскольку React является декларативным, вы определяете, как должна выглядеть DOM, в методе компонента render(). Затем библиотека выполняет тяжелую работу по созданию, удалению и перетасовке элементов HTML для создания структуры DOM, которую вы «объявили».
Внутри React поддерживает свой собственный «виртуальный DOM», который обеспечивает производительность всей этой процедуры. Это позволяет библиотеке выполнять наименьшее возможное количество повторных рендеров, сводя к минимуму накладные расходы, обычно связанные с манипулированием DOM.
Заключение
Популярность React проистекает из значительного упрощения управления состоянием и манипулирования DOM, которое он обеспечивает. Его декларативный характер позволяет создавать очень сложные веб-приложения аналогично базовым HTML-страницам, при этом разработчикам нужно только определить, как должна выглядеть структура DOM в текущий момент времени.
Как и в любом хорошем деле, есть и минусы. Использование React увеличит размер загрузки вашего сайта. Он также добавляет зависимость от JavaScript, что может помешать некоторым пользователям получить доступ к вашему контенту. Есть гораздо больше точек отказа, чем у «чистого» HTML, CSS и JavaScript решения.
Эти ограничения означают, что React может быть не лучшим выбором для простых статических веб-сайтов. Сайты с небольшой интерактивностью и ограниченным манипулированием DOM, как правило, лучше придерживаются более легкого решения. Преимущества React действительно начинают окупаться на сайтах со значительным внутренним состоянием. React повышает производительность разработчиков, удобство сопровождения кодовой базы и общую производительность сайта при осторожном использовании на интерактивных сайтах, ориентированных на данные.