react如何控制全局loading_React Loading组件的正确姿势

React Loading组件的正确姿势

页面异步加载的时候为缓解用户等待的焦虑情绪，我们通常会采取加载中...等文字或图标提示。

(图例，各种加载中状态)

日常写法

直接在state中存一个loading的布尔变量，请求发送前后改变状态，触发页面渲染

this.setState({

loading:true //发送之前

});

ajax("path", {a:1}, (text)=>{

this.setState({

loading:false, //正确回调函数中设置为false

text:text

});

}, ()=>{

this.setState({

loading:false, //错误回调函数中设置为false

text:"出错了"

})

});

render函数

render(){

let {loading,text} = this.state;

return

{loading ?

加载中...

: null}

{text}

;

}

上面是一个非常普通的写法，实现功能完全没问题，但不够优雅，也不具备可扩展性，试想组件中有多个请求