Вещи часто приходят полный круг в программной инженерии.В частности, веб-работу с серверами доставки контента до клиента.В последнее время с созданием современных веб-систем, таких как AngularJS и Эмбер, мы видели толчок оказывать на клиента и только использовать сервер для API.Мы сейчас видим возможное возвращение или, скорее, более комбинации обеих архитектурах происходит .

Что такое реагировать

Реагировать является, в соответствии с официального website ¹ :

“ Библиотека JavaScript для создания пользовательских интерфейсов .”

Это способ создания многократно интерфейсных компонентов.Простой и простой, что цель Реагировать .

Что отличает

Реагировать быстро поднялся на огромную популярность в сообществе JavaScript.Есть ряд причин для ее успеха.Одним из них является, что Facebook создал его и использует его.Это означает, что многие разработчики в Facebook работать с ним, исправлять ошибки, предполагая, функции и так далее .

Еще одна причина для его быстрого популярности является то, что он отличается.Это в отличие от AngularJS __28 | | 2__8 | __32, Backbone.js __34 | | 3__8 | __38, Ember __40 | | 4__8 , Knockout ⁵ и почти любой из других популярных фреймворков М.В. * JavaScript, которые вышли во время революции JavaScript в последние несколько лет.Большинство из этих структур работать на идее двусторонняя привязка к DOM и обновления на основе событий.Они также все требуют DOM, чтобы быть present;так, если вы работаете с одним из этих рамок, и вы хотите какой-либо из вашей разметки быть вынесено на сервере, вы должны использовать нечто подобное PhantomJS .

Виртуальная DOM

Реагировать часто описывается как “V” в приложении MVC.Но он делает V совсем по-другому, чем другие механизмы М.В. *.Это отличается от вещей, как руль, шаблоны подчеркивания и шаблонов AngularJS.Реагировать работает на концепции «виртуальной DOM.” Он поддерживает этот виртуальный ДОМ в памяти, и в любое время изменения, внесенные в DOM, реагировать делает быстро разн изменений, партии их все в одно обновление и парад текущаяДОМ сразу .

Это имеет огромные последствия.В первую очередь,производительность мудрым, вы не делаете постоянно обновления DOM, как и многие из других структур JavaScript. ДОМ является огромным препятствием с переднего плана выполнения . второй ветвления, что реагировать может оказать на сервере так же, как легко, как это может на клиенте .

Реагировать предоставляет метод под названием 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 приложений, это может занять второе, и большинство пользователей в эти дни ожидают время загрузки менее чем за две секунды.В то время как содержание загружается, страница нетонированное.Это называется “вспышка без стилей содержания” (FOUC).Одним из преимуществ изоморфной подхода к созданию приложений, что вы получаете преимущества скорости оказания на сервере, и вы все еще можете сделать компоненты после загрузки страницы на клиенте .

Работа изоморфной приложение не заменить традиционные API сервера, а просто помочь устранить FOUC и дать пользователям лучше, быстрее опыт, который они привыкли к растущей .

Общий Code

Один большой плюс заключается в возможности использовать тот же код на клиенте и на сервере.Просто создайте свои компоненты, и они будут работать в обоих местах.В большинстве систем, таких как Rails __26 | | 6__25 ASP.NET MVC __32 | | 7__25 Вы обычно имеют erb 53 ~ или | Просмотров за оказание насервер.Затем вы должны иметь на стороне клиента шаблонов, таких как руль или Hogan.js, которые часто дублируют логику.С Реагировать, те же компоненты работают в обоих местах .

Реагировать идет выше и в …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров