首页 > reactjs中如何预加载的数据?

reactjs中如何预加载的数据?

我现在是这么干的:
1、在一个Component中给state来做一个初始值,比如:
this.state = {
data:null
}
2、在componentDidMount异步加载数据,然后setState
3、render里面,时候判断this.state.data,
如果==null,表示还未加载成功
如果!=null,表示已经加载完成

这样做其实对加载一个异步数据的时候还好使。

但是如果我需要加载2个异步数据,发起两次请求。
那我是该如何做到等待2个异步数据全部加载完成以后在进行setState


如果两个异步相互之间没有依赖的话,那直接两次setState就可以了呀。

哪个数据回来了就显示哪个数据就行了。跟你一次是一样的处理。

如果两个数据的显示 有依赖的话,那就先把结果缓存起来,等两次都结束才setState,或者直接用promise.all


1、不推荐在componentDidUpdate里面执行setState,参考eslint-config-airbnb规则中:

// Prevent usage of setState in componentDidUpdate
'react/no-did-update-set-state': 2,

2、多个异步请求 都 获取数据后执行操作 可以采用:
1)在第一个异步请求的回调中发起第二个请求,在第二个请求的回调中调用setState

$.get().done(function() {
// 此处可写异步请求
}).fail(function() {
// 此处可写异步请求
});

2)类似题主举例的方法,在每一个异步请求的回调中调用setState,修改一个对应的标识,最后在render中判断标识是否为真

// getInitialState
getInitialState() {
    return {
        tag1: false,
        tag2: false
    }
},

// 渲染dom之前请求数据,或在getInitialState时请求
componentWillMount() {
    this.ajax1();
    this.ajax2();
},

ajax1() {
    const self = this;
    $.get().done(function() {
        // 此处设置第一个参数为真
        self.setState({
            tag1: true
        });
    });
},

ajax2() {
    const self = this;
    $.get().done(function() {
        // 此处设置第一个参数为真
        self.setState({
            tag2: true
        });
    });
},

render() {
    cosnt ajaxTags = this.state.tag1 && this.state.tag2;
    return (<div>{ajaxTags}</div>);
}

链式请求是阻塞的,时间会加长;非阻塞的做法多执行了一次setState,但是时间变少

如有错误,请求指正

【热门文章】
【热门文章】