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

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>
        );
    },
});