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. В любом случае, этот шаг оптимизации можно будет выполнить на заключительной стадии, после утряски собственно компонентов.
ссылка на оригинал статьи https://habrahabr.ru/post/315506/