在DOM渲染时,React显示加载微调器

Question

我有一个列表,其中包含首先加载30个项目的项目,如果用户点击"全部加载",则会显示其余项目:

+---------------------------------------------------------+
|                                                         |
|                           List                          |
|                                                         |
|                                                         |
|                                                         |
+---------------------------------------------------------+
|                       Load All Button                   |
+---------------------------------------------------------+

当列表很大(超过1K项)时,"全部加载"步骤的渲染需要一些时间,同时DOM被卡住而没有响应.

什么是利用React的生命周期事件的正确方法,以便在单击按钮时它将更改为加载微调器,当列表完全呈现并准备就绪时它将更改回来？

我已经尝试将两个部分(列表和按钮)分成两个组件并将它们包装在一个包含"加载"的父组件中,然后在List componentDidUpdate函数中更改状态,但它不起作用

的jsfiddle

http://jsfiddle.net/wh4z60m6/4/

Answer 1

React中的渲染是同步的,这意味着没有其他东西可以与它一起运行.

您可以逐步呈现列表,因为用户的屏幕可能无法一次显示超过一百个项目.

另外,请注意,在开发构建中渲染数千个项目比在React的生成构建中慢得多.

编辑:另一种选择是首先渲染加载器,然后在下一帧渲染列表项.将显示加载程序,直到列表项完成呈现.

React.createClass({
    getInitialState: function() {
        return {
            loading: false,
            showAll: false,
        };
    },

    _showAll: function() {
        this.setState({ showAll: true, loading: true }, function() {
            // Using setTimeout here ensures that the component will wait until
            // the next frame before trying to render again.
            this.setTimeout(function() {
                this.setState({ loading: false });
            }.bind(this), 1000 / 60);
        });
    },

    render: function() {
        var amount = (this.state.showAll && !this.state.loading) ? 100000 : 3;
        return (
            <div>
                <button onClick={this._showAll}>
                    {this.state.loading ? 'Loading...' : 'Show all'}
                </button>
                {items.slice(0, amount).map(renderItem)}
            </div>
        );
    },
});