React学习笔记之react进阶篇（2）

2.组件与服务器通信

　　组件的生命周期分为三个阶段：挂载阶段->更新阶段->卸载阶段，本文主要集中讲述挂载和更新阶段组件如何和服务器进行通信。

 

 1.组件挂载阶段通信

　1.componentDidMount()中进行通信

componentDidMount(){
    var that = this;
    fetch('/path/to/user-api').then(function(response){
        response.json().then(function(data){
            that.setState({user:data})
            });
        });
     }
}

 

　2.componentWillMount()中进行通信

componentWillMount(){
    var that = this;
    fetch('/path/to/user-api').then(function(response){
        response.json().then(function(data){
            that.setState({user:data})
            });
        });
     }
}

　　

 2.组件更新阶段通信

　componentWillReceiveProps()中进行通信

componentWillReceiveProps(nextProps){
    if(nextProps.category!=this.props.category){                      //判断原本的props是否发生变化，若没有发生变化则不需要进行更新
        fetch('/path/to/user-api?category=' nextProps.category).
then(function(response){
            response.json().then(function(data){
                that.setState({users:data})
            });
           });
        }
    }
}

　　

 

更多专业前端知识，请上 【猿2048】www.mk2048.com