Как правильно контролировать состояния loader'а?

Question

[Арсений Ильяшов]

У меня есть компонент - лоадер, который закрывает страницу, в ожидании пока она загрузится. Она является компонентом

var PageLoader = React.createClass({
     render: function() {
        return (
            <div className='loader'>
                <div className="loader-body" />
                <div className="loader-section section-left" />
                <div className="loader-section section-right" />
            </div>
        );
    }
});

React.render(<PageLoader />, body);

Ну там ещё стили, сюда их писать не буду. Лоадер скрывается, когда .loader получает класс .loaded. Получает он этот класс на complete ajax запроса, просто через
$('.loader').addClass('loaded');

Правильно ли это, с точки зрения "React way"? Или подобные изменения стоит производить через контроль состояний компонента? Если да, то как лучше это сделать?

Answer 1

[Андрей Антропов]

Указанная конструкция не верна в корне, React way может выглядеть примерно так:

var PageLoader = React.createClass({
     onAjaxComplete : function() {
         ths.setState({loaded: true});
     },
     render: function() {
        var classes = cx({
           loader: true,
           loaded: this.state.loaded,
        })
        return (
            <div className={classes}>
                <div className="loader-body" />
                <div className="loader-section section-left" />
                <div className="loader-section section-right" />
            </div>
        );
    }
});

React.render(<PageLoader />, body);

Однако для оганизации потока данных все таки рекомендую посмотреть в сторону Flux архиектуры, там состояние будет получаться из соответствующего хранилища. flummox reflux

Comments

[Арсений Ильяшов]

Спасибо!

[Арсений Ильяшов]

Заметил, что React выдаёт в консоль, что classSet is depricated. Как правильно cx объявить, чтобы избежать использования classSet?

[Андрей Антропов]

Эта утилита вышла из под крыла React ```npm i --save classnames```

[Арсений Ильяшов]

Андрей Антропов: ну я её и использую. То есть не стоит беспокоиться, что она deprecated?

[Андрей Антропов]

Нет если он ругается на deprecated classnames это отдельная либа без зависимостей