Вещи часто приходят полный круг в разработке программного обеспечения.Веб, в частности, начали с серверами доставки контента до клиента.В последнее время с созданием современных веб-систем, таких как AngularJS и Эмбер, мы видели толчок оказать на клиента и только использовать сервер для API.Мы сейчас видим возможное возвращение или, скорее, больше комбинации обеих архитектурах, происходящих .
Что такое Реагировать
Реагировать есть, в соответствии с официального website 1 :
“ Библиотека JavaScript для создания пользовательских интерфейсов .”
Это способ создания многократно используемых интерфейсных компонентов.Просто и понятно, что цель Реагировать .
Чем она отличается
Реагировать быстро вырос до огромной популярности в обществе JavaScript.Есть ряд причин, по ее успеха.Во-первых, Facebook создал его и использует его.Это означает, что многие разработчики Facebook работать с ним, исправлять ошибки, предполагая, функции и так далее .
Еще одна причина для его быстрой популярности в том, что он по-другому.Это в отличие от AngularJS 2 , Backbone.js 3 , Ember 4 , Knockout 5 и почти любой из других популярных фреймворков MV * JavaScript, которые вышли во время революции JavaScript в последние несколько лет.Большинство из этих других структур работают на идее двусторонний привязки к DOM и обновления на основе событий.Они также все требуют DOM, чтобы быть present;Так вот, когда вы работаете с одним из этих рамок, и вы хотите, чтобы любой из разметке быть вынесено на сервере, вы должны использовать что-то вроде PhantomJS .
Виртуальный DOM
Реагировать часто описывается как “V” в приложении MVC.Но он делает V совсем иначе, чем другие механизмы MV *.Это отличается от вещей, как Рули, шаблоны подчеркивания и шаблонов AngularJS.Реагировать работает на концепции “виртуального DOM.” Он поддерживает этот виртуальный DOM в памяти, и в любое время изменения, внесенные в DOM, реагируют ли быстро Diff изменений, партии их все в одно обновление и парад фактическаяDOM сразу .
Это имеет огромные последствия.В первую очередь, с точки зрения производительности, вы не постоянно делать обновления DOM, асо многими из других фреймворков. DOM является огромным препятствием с переднего плана выполнения . второй ветвления является то, что Реагировать может оказать на сервере так же легко, как это может на клиенте .
Реагировать предоставляет метод под названием React.renderToString().Этот метод позволяет пройти в компоненте, который, в свою очередь делает его и все дочерние компоненты, которые он использует, и просто возвращает строку.Вы можете взять эту строку в HTML и просто отправить его вниз для клиента .
Example
Эти компоненты строятся с синтаксисом под названием JSX.Во-первых, JSX выглядит странным HTML-JavaScript гибрид:
var HelloWorld = React.createClass({
displayName: "HelloWorld",
render() {
return (
<h1>Hello {this.props.message}</h1>
);
}
});
React.render(<HelloWorld message="world" />, document.body);
Что вы делаете с этим .jsx Формат передать его через (или “transpile”) webpack, grunt, gulp, или ваш “визуализации” выбора, а затем выплюнуть наличие которая выглядит следующим образом:
var HelloWorld = React.createClass({
displayName: "HelloWorld",
render: function() {
return (
React.createElement("h1", null, "Hello ", this.props.message)
);
}
});
React.render(React.createElement(HelloWorld, {message: "world"}), document.body);
Это то, что наши HelloWorld.jsx комплектующие transpiles не — ничего больше, чем просто JavaScript.Кто-то может считать это нарушением разделения проблем путем смешивания наличие с HTML.Во-первых, это похоже на то, что мы делаем.Тем не менее, после работы с Реагировать на некоторое время, вы понимаете, что близость разметки вашего компонента в JavaScript позволяет развиваться более быстрыми темпами и поддерживать ее больше, потому что вы не прыгать туда и обратно между HTML и файлы JavaScript. Все код для данного компонента живет в одном месте .
React.render прикрепляет <HelloWorld> компонент в body.Естественно, это может быть любой элемент существует.Это вызывает компонент в render способ уволить, и результат добавляется к DOM внутри <body> тега .
С React компонента, все, что вы пройти в качестве атрибутов — сказать, <HelloWorld message="world" /> — у вас есть доступ в компонента this.props.Так, в <HelloWorld> компонента, this.props.message составляет world.Кроме того, посмотрите немного ближе в JSX части кода:
return (
<h1>Hello {this.props.message}</h1>
);
Вы заметите, прежде всего, что у вас есть, чтобы обернуть HTML в скобках.Во-вторых, this.props.message, завернутый в фигурные скобки.Фигурные вы получите доступ к компоненту через this .
Каждый компонент также имеет доступ к его с Реагировать, каждый компонент управляет его состояние с помощью нескольких простых методов API, getState И setState, а также getInitialState Ибо, когда первый компонент нагрузок.Всякий раз, когда изменяется состояние, render метод просто повторно делает компонент.Например:
var Search = React.createClass({
getInitialState() {
return {
search: ""
};
},
render() {
return (
<div className="search-component">
<input type="text" onChange={this.changeSearch} />
<span>You are searching for: {this.state.search}</span>
</div>
);
},
changeSearch(event) {
var text = event.target.value;
this.setState({
search: text
});
}
});
React.render(<Search />, document.body);
В этом примере, getInitialState функция просто возвращает литерал объекта, содержащего начальное состояние компонента .
render функция возвращает JSX для нашего элементов — так, input и span, как завернутый в div.Имейте в виду, что только один элемент могут когда-либо быть возвращен в JSX как родитель.Другими словами, вы не можете вернуться <div></div><div></div>;Вы можете вернуть только один элемент с несколькими детьми .
Обратите внимание, onChange={this.changeSearch}.Это говорит компонент уволить changeSearch функцию, когда срабатывает событие изменения на входе .
changeSearch функция получает event уволили из событий DOMи может захватить текущий текст входе.Затем, мы называем setState и передать в тексте.Это приводит к render огонь снова, и {this.state.search} отразит новое изменение .
Многие другие интерфейсы в Реакция доступны для работы, но на высоком уровне, что мы и сделали выше так же легко, как он получает для создания простой Реагировать компонент .
Изоморфная JavaScript
С Реагировать, мы можем строить “изоморфными” приложения .
Я · так · мор · гомеоморфными: “соответствующих или аналогичных по форме и отношений”
Это уже стало модным в 2015 году В принципе, это просто означает, что мы получаем, чтобы использовать тот же код на клиенте и на сервере .
Этот подход имеет много преимуществ .
Ликвидация FOUC
С AngularJS, Эмбер (на данный момент) и SPA-типа архитектуры, когда пользователь впервые попадает на страницу, все активы должны загрузить.С SPA приложений, это может занять секунду, и большинство пользователей в эти дни ожидают время загрузки менее чем за две секунды.В то время как содержание загружается, страница нетонированное.Это называется “вспышка без стилей содержания” (FOUC).Одним из преимуществ изоморфной подхода к созданию приложений является то, что вы получаете преимущества скорости рендеринга на сервере, и вы все еще можете сделать компоненты после загрузки страницы на клиенте .
Работа изоморфной приложение не заменить традиционный API сервера, а просто, чтобы помочь устранить FOUC и дать пользователям лучше, быстрее опыт, который они растут привыкли .
Общий Code
Один большой плюс заключается в возможности использовать тот же код на клиенте и на сервере.Просто создайте компонентов, и они будут работать в обоих местах.В большинстве систем, таких как Rails 6 , ASP.NET MVC 7 Вы обычно имеют erb или cshtml Просмотров за оказание насервер.Затем вы должны иметь на стороне клиента шаблоны, такие как рули или Hogan.js, которые часто дублируют логику.С Реагировать, одни и те же компоненты работают в обоих местах .
Progressive Enhancement
Оказание сервера позволяет отправлять вниз баребоны HTML, что клиент должен отобразить веб-сайт.Вы можете расширить опыт или сделать несколько компонентов в клиенте .
Доставка хороший опыт для пользователя на панель телефона в Африке, а также в качестве расширенной опыт для пользователя на 15-дюймовом MacBook Pro с Retina Display, подключили к новому 4K монитор, как правило, довольно утомительной задачей.
Реагировать и …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров