Перейти к содержанию

React.js

Для создания пользовательского интерфейса мы используем библиотеку React.js, разработанную в facebook.

Особенности:

  • Декларативное описание интерфейса.

  • Перестроение интерфейса при каждом обновлении данных (это работает быстро из-за концепции shadow DOM и оптимизационных техник, типа shouldComponentUpdate и Immutable.js – подробнее в документации и интернете).

  • Приоритетным является односторонний поток данных (односторонние биндинги).

Рассмотрим пример:

class Content extends React.Component {
  render() {
    return (
      <div className="dashboard">
        <TessaTree treeData={this.props.treeData} selected={selectedView} />
        <TessaView viewData={this.props.viewData} />
      </div>
    );
  }
}

Здесь приведено определение компонента Content.

Метод render возвращает то, как должен выглядеть компонент.

Как видно, компонент состоит из div-элемента, а также из других компонентов: TessaTree, TessaView. При построении компоненты TessaTree, TessaView также будут опрошены через метод render, как они должны выглядеть. Таким образом создание новых компонент может быть разбито на части, со своими свойствами и отображением.

Компонент может получать данные и ссылки на функции через свойства. В этом случае свойства - это treeData, selected для компонента TessaTree, и viewData для TessaView.

К переданным данным компонент может получить доступ через свойство props. В этом случае компоненту Content были переданы свойства viewData и treeData (за рамками примера). Компонент может работать с переданными данными как ему надо. В данном случае Content передает полученные данные дальше, вниз по иерархии.

После опроса всех компонентов мы получаем метаструктуру описания html-страницы, которую react переводит в html-теги и разметку показывает пользователю.

Подробнее о работе React.js в документации.

Back to top