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'))
posted @ 2020-01-31 22:35  ヾ百毒不侵  阅读(119)  评论(0编辑  收藏  举报