reactjs - 在 React.js 中的耗时操作之前加载消息

Question

我试图在 React 中发生耗时的操作之前出现“正在加载”消息。我试过这个:

var LoadingExample1 = React.createClass({
    getInitialState: function () {
        return {message: ""};
    },
    render: function () {
        return (
            <div>
                <div>{this.state.message}</div>
                <button onClick={this.doWork}>Solve</button>
            </div>
            )
    },
    doWork: function () {
        this.setState({message: "Loading..."});

        for (var i = 0; i < 1000000000; i++) {
            ;
        }

        this.setState({message: "Done."});
    }
});

React.renderComponent(
    <LoadingExample1 />,
    document.getElementById("example1")
);

但似乎只有在操作完成后才更新 UI，为时已晚。我也尝试使用 setState 回调，但结果是相同的:

var LoadingExample2 = React.createClass({
    getInitialState: function () {
        return {message: ""};
    },
    render: function () {
        return (
            <div>
                <div>{this.state.message}</div>
                <button onClick={this.doWork}>Solve</button>
            </div>
            )
    },
    doWork: function () {
        this.setState({message: "Loading..."}, function () {

            for (var i = 0; i < 1000000000; i++) {
                ;
            }

            this.setState({message: "Done."});
        });
    }
});

React.renderComponent(
    <LoadingExample2 />,
    document.getElementById("example2")
);

对于接下来要尝试什么有什么建议吗？

Answer 1

这就是我要做的。我有兴趣听听是否有更好的方法。

var LoadingExample3 = React.createClass({
    getInitialState: function () {
        return {message: ""};
    },
    render: function () {
        return (
            <div>
                <div>{this.state.message}</div>
                <button onClick={this.doWork}>Solve</button>
            </div>
            )
    },
    doWork: function () {
        this.setState({message: "Loading..."});
        this.doWorkAsync();
    },
    doWorkAsync: function () {
        var self = this;
        setTimeout(function() {

            for (var i = 0; i < 1000000000; i++) {
                ;
            }

            self.setState({message: "Done."});
        }, 0); // timeout of 0 ms means "run at the end of the current event loop"
    }
});

React.renderComponent(
    <LoadingExample3 />,
    document.getElementById("example1")
);