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

Question

我的页面需要从服务器获取数据，这可能需要几秒钟。因此我想在获取时显示“正在加载...”。所以我有一个 bool 状态变量 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是单线程的。当您运行循环时整个页面卡住。所以它不存在 React 问题。

获取数据是异步操作，不会卡住页面。您可以使用setTimeout来模拟它。在这种情况下一切正常。

示例:

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

JSFiddle