ReactJS: отказ от JSX с сохранением удобства

ReactJS — это Javascript библиотека для разработки веб-компонентов на основе виртуального DOM. ReactJS стал уже достаточно популярен за тот год, как его выпустила в свет компания Facebook. В ближайшее время можно ожидать интереса к этой библиотеке со стороны еще большего количества компаний, потому что ReactJS позволяет создавать надежные, производительные интерфейсы быстро.

Особенностью ReactJS является использование смеси HTML и Javascript для большей читаемости, например:

   render: function(){

      return <div>
        <div class="clicker" onMouseDown={this.handleMouseDown}>
          Give me the message!
        </div>
        <div class="message">Message conveyed
          <span class="count">{this.state.count}</span> time(s)</div>
      </div>
      ;
    }

Этот язык называется JSX и перед его использованием в браузере специальная утилита конвертирует все в простой Javascript. Результат получается такой:

render: function(){

  return React.DOM.div(null, 
   React.DOM.div( {className:"clicker", onMouseDown:this.handleMouseDown}, 
" Give me the message! "   ),
   React.DOM.div( {className:"message"}, "Message conveyed ",    React.DOM.span( {className:"count"}, this.state.count), " time(s)")
  )
  ;
 }

Можно не использовать JSX и сразу писать на Javascript, но этот подход более трудоемкий и менее читабельный. С другой стороны, использование JSX накладывает ряд требований, которые нежелательны, как то:

* использование дополнительного редактора для разметки JSX
* использование дополнительной утилиты для прекомпиляции JSX
* отказ от использования TypeScript

Отказ от TypeScript для меня неприемлим, поэтому родилась такая идея: улучшить читабельность за счет применения удобной обьектной структуры Javascript и затем генерировать код React.DOM, опять на Javascript, вообще без JSX. Получилось так:

render: function () {

        var dom = [
          {
            tag: React.DOM.div,
            props: { 
              className: "class1",
              onClick: this.handleClick
           },
           content: "Hello " + this.state.value
          },
          {
            tag: React.DOM.span,
            props: { },
            dom: [
              {
                tag: React.DOM.span,
                props: { className: "class2" },
                content: "Hello " + this.state.value
              }
            ]
          }
        ];

        return parse(dom);
      }

Таким образом, создается структура на основе массива объектов, каждый из которых содержит 3 свойства: tag, props и dom (если есть вложенные объекты) или content (если этот объект листовой). Функция, которая создает код для ReactJS такая:

function parse(dom, inner) {

      var items = [];

      for (var el in dom) {

        if (dom[el].dom) {
          items.push(dom[el].tag(dom[el].props, parse(dom[el].dom, inner || true)));
        } else {
          items.push(dom[el].tag(dom[el].props, dom[el].content));
        }
      }

      if (inner) {
        return items.length == 1 ? items[0] : items;
      } else {
        return items.length == 1 ? items[0] : React.DOM.section(null, items);
      }
    }

По результатам подход оказался очень удобным. Заметных потерь при отрисовке не обнаружено, но не исключаю, что на сложных интерфейсах все-же придется создавать DOM на основе примитивов React. В любом случае, этот шаг оптимизации можно будет выполнить на заключительной стадии, после утряски собственно компонентов.

Автор: alexrodygin

Источник