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

发布时间：2020-12-15 16:15:52 所属栏目：百科来源：网络整理

导读：我想在React中执行耗时的操作之前出现“正在加载”消息.我试过这个： var LoadingExample1 = React.createClass({ getInitialState: function () { return {message: ""}; },render: function () { return ( div div{this.state.message}/div button onClick

我想在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: ""};
    },doWork: function () {
        this.setState({message: "Loading..."},function () {

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

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

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

有关下一步尝试的建议吗？

解决方法

这就是我要做的.如果有更好的方法,我有兴趣听听.

var LoadingExample3 = React.createClass({
    getInitialState: function () {
        return {message: ""};
    },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")
);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!