react如何实现加载中效果

Question

如图，类似这样的效果：

请求数据使用的fetch,想请问一下这种加载中的效果是写在生命周期中还是写在fetch请求中呢？
该怎么实现这样的效果？

Answer 1

给楼主一个思路吧：
首先组件初始化的时候设置state
loading: false

然后在发送fetch请求的时候loading置为true
成功/失败的时候再置为false

然后render方法中根据false|true 动态改变loading组件是否显示

Answer 2

这东西写在全局tools文件中好，因为只要调接口都能用到。

const tools = {
/**
 * 显示loading框
 * @return {[type]}
 */
showLoading() {
    if (this.loadingCount <= 0) {
        ReactDOM.render(
            <div className="sy-loadingwrap">
                <Spin size="large"></Spin>
            </div>,
            document.getElementById("sy-loading")
        );
    }
    this.loadingCount++;
},
/**
 * 隐藏loading框
 * @return {[type]}
 */
hideLoading() {
    if (this.loadingCount === 0) return;
    this.loadingCount--;
    if (this.loadingCount === 0) {
        ReactDOM.unmountComponentAtNode(document.getElementById("sy-loading"));
    }
},
}

在ajax send之前调用一下tools.showLoading(),在ajax 请求完成的complete中在调用一下tools.hideLoading()

Answer 3

看个还是要看场景。就我个人来讲，我既写到过请求中，也写到过组件中。

如果你需要在请求级别做loading，那么就放在请求。如果你是需要在组件（你可以把它看作是请求的集合）中，那就loading可以写到组件state中去。

实现非常简单，拿请求级别来说，只需要fetch前后分别设置不同的state，view根据state决定渲染loading与否即可

Answer 4

推荐使用antd-Spin