08.React组件进阶(四）组件的生命周期

组件的生命周期

意义：组件的生命周期有助于理解组件的运行方式，完成更复杂的组件功能，分析组件错误原因等

组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程

生命周期的每个阶段总是伴随着一些方法的调用，这些方法就是生命周期的钩子函数

钩子函数的作用：为开发人员在不同阶段操作组件提供了时机

只有类组件 才有生命周期

生命周期的三个阶段

1.每个阶段的执行时机
2.每个阶段钩子函数的执行顺序
3.每个阶段钩子函数的作用

1.创建时（挂载阶段）

执行时机：组件创建时（页面加载时）
执行顺序：constructor() render() componentDidMount()

钩子函数：constructor()
触发时机：创建组件时，最先执行
作用：1.初始化state 2.为事件处理程序绑定this

钩子函数：render()
触发时机：每次组件渲染都会触发
作用：渲染UI（注意：不能调用setState())

钩子函数：componentDidMount()
触发时机：组件挂载（完成DOM渲染后)
作用：1.发送网络请求 2.DOM操作

2.更新时阶段

执行时机：1.setState() 2.forceUpdate() 3.组件接收到新的props
说明：以上三者任意一种变化，组件就会重新渲染
执行顺序： render() componentDidUpdate()

钩子函数：render()
触发时机：每次组件渲染都会触发
作用：渲染UI（与挂载阶段 是同一个render)

钩子函数：componentDidUpdate()
触发时机：组件更新（完成DOM渲染）后
作用：1.发送网络请求 2.DOM操作 （注意：如果要setState()必须放在一个if条件中，如果直接调用，会导致递归更新）

class App extends React.Component{
   state={
       count:0
   }
   handleClick=()=>{
       this.setState({
           count:this.state.count+1
       })
   }
   render(){
     return(
         <div>
             <Child  count={this.state.count}/>
            <button onClick={this.handleClick}>打豆豆</button>
         </div>
     )
   }
    componentDidUpdate(prevProps){
        console.warn('--子组件--生命周期钩子函数：componentDidUpdate')
        //正确做法
        //比较更新前后的props是否相同，来决定是否重新渲染组件
        console.log('上一次的props:',prevProps,',当前的props：‘，this.props)
        if(prevProps.count !== this.props.count){
            this.setState({})
            //发送ajax请求的代码
        }
    }
}

class Child extends React.Component{
    render(){
        return(
        <h1>打了多少个豆豆:{this.props.count}</h1>
        )
    }
}
ReactDOM.render(<App />,document.getElementById('root'))

3.卸载时（卸载阶段）

执行时机：组件从页面中消失

钩子函数：componentWillUnmount()
触发时机：组件卸载（从页面中消失）
作用：执行清理工作（比如：清理定时器等）

import PropTypes from 'prop-types'

class App extends React.Component{
   state={
       count:0
   }
   handleClick=()=>{
       this.setState({
           count:this.state.count+1
       })
   }
   render(){
     return(
         <div>
             {
                 this.state.count>3?<p>豆豆被打死了～</p>: <Child  count={this.state.count}/>
             }
            <button onClick={this.handleClick}>打豆豆</button>
         </div>
     )
   }

}

class Child extends React.Component{
    componentDidMount(){
        //开启定时器
        this.timerId=setInterval(()=>{
            console.log('定时器正在执行。。。')
        },500)
    }
    render(){
        return(
        <h1>打了多少个豆豆:{this.props.count}</h1>
        )
    }
    componentWillUnmount(){
        console.warn('生命周期钩子函数：componentWillUnmount')
        //清理定时器
        clearInterval(this.timerId)
    }
}
ReactDOM.render(<App />,document.getElementById('root'))