React学习笔记day03_React生命周期函数及应用

1.React生命周期流程

根据上图
//组件挂载前执行
componentWillMount(){
console.log(‘componentWillMount’)
}
//组件挂载后自动执行
componentDidMount() {
//axios请求在这里发
//promise存的请求过程
const promise = axios.get(‘http://www.dell-lee.com/react/api/demo.json’)
promise.then((res) =>{
console.log(res)
})
console.log(‘componentDidMount’ )
}
//组件更新前自动执行
shouldComponentUpdate() {
console.log(‘shouldComponentUpdate’)
return true
}
//组件更新前 shouldComponentUpdate之后 自动执行
componentWillUpdate(){
console.log(‘componentWillUpdate’)
}
//组件更新前 shouldComponentUpdate之后，自动执行
componentDidUpdate() {
console.log(‘componentWillUnmount’)
}

2.生命周期函数的应用

（1）组件过载完成，render（）执行完绑定一个window点击的效果

    componentDidMount() {
 
        window.addEventListener('click', () => {console.log('window click')})

    }

（2）axios请求通常在componentDidMount（）l

    componentDidMount() {
        //axios请求在这里发
        //promise存的请求过程
       const promise = axios.get('http://www.dell-lee.com/react/api/demo.json')
        promise.then((res) =>{
            console.log(res)
        })
        console.log('componentDidMount' )
    }