ReactJS:如何在更改状态后立即更新组件

Question

我的页面需要从服务器获取数据,这可能需要几秒钟.因此我想在获取时显示"正在加载...".所以我有一个布尔状态变量loading来指示它是否正在获取数据.如果loading是true,render()功能显示"立即加载",否则显示"未加载".但是,事实证明,在设置loading为true 后,react不能重新呈现组件.

这是jsfiddle.

var Hello = React.createClass({
    getInitialState: function() {
        return {
            loading: false,
        };
    },

    handleClick: function() {
        this.setState({
            loading: true
        }, function() {
            // dummy loop to simulate fetching data
            for (var i=0;i<=100000;i++) {
                console.log("dummy");
            }

            this.setState({
                loading: false,
            });
        }.bind(this));
    },

    render: function() {
        if (this.state.loading) {
            return (
                <div>
                    <button onClick={this.handleClick}>
                        load
                    </button>
                    <p>Loading now</p>
                </div>
            );
        }

        return (
            <div>
                <button onClick={this.handleClick}>
                    load
                </button>
                <p>Not Loading</p>
            </div>
        );
    }
});

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

Answer 1

因为JS是单线程的.当你运行你的循环整页冻结.所以它没有反应问题.

获取数据是异步操作,它不会冻结页面.你可以用它来模仿它setTimeout.而且这种情况一切正常.

例:

handleClick: function(){
  this.setState({
    loading: true
  }, function(){
    setTimeout(function() {
      this.setState({
        loading: false,
     });
    }.bind(this), 3000)
  }.bind(this));
},

的jsfiddle