ReactJS и jQuery Mobile Tables - как оптимально перерисовать таблицу после обновления магазина
Я перерисовываю таблицу jqmobile таким образом, и все работает:
var List = React.createClass({
componentDidMount:function(){
$(".list-box-app-list").table();
},
componentDidUpdate:function(){
$(".list-box-app-list").table();
},
render: function() {
var allListItems = this.props.allListItems;
var listItems = [];
for (var key in allListItems) {
listItems.push(<ListItem key={key} list_item={allListItems[key]} />);
}
return (
<table data-role="table" data-mode="columntoggle" className="ui-responsive list-box-app-list">
<thead>
<tr>
<th data-priority="2">Id</th>
<th>Author</th>
<th data-priority="1">Text</th>
</tr>
</thead>
<tbody>
{listItems}
</tbody>
</table>
);
}
});
Пример здесь: https://eugen35@bitbucket.org/eugen35/flux-todomvc.git
ветка: listAndJQMobile
npm install
npm run watch // create bundle.js
npm start // run server.js
Есть ли способ сделать это более оптимально?
Потому что мой пример, я думаю, работает так: 1) (пере) рендеринг JSX в DOM, 2) ИНИЦИАЛИЗАЦИЯ JQMobile-table with .table(); Раньше я предполагал, что responseDOM обновляет только некоторые новые строки в моей таблице, и мне не нужно повторно инициализировать JQM-таблицу. Но это не работа. Вероятно, реагирует на каждое обновление в таблице DOM. И из этого мне нужно повторно инициализировать его как таблицу JQM.
Что я делаю не так?