React：组件的生命周期

React：组件的生命周期

• 
  
• ​​组件的生命周期​​
• • • 
      
  • ​​生命周期的三个阶段：​​
  • • • 
        
    • ​​1.创建时（挂载阶段）​​
    • ​​2.更新时（更新阶段）​​
    • ​​3.卸载时（卸载阶段）​​
      • 
        
    • 
      
• 
  

组件的生命周期

注：只有类组件（class组件）才有生命周期。

生命周期的三个阶段：

1.创建时（挂载阶段）

执行时机：组件创建时（页面加载时）

执行顺序：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class App extends React.Component{
    constructor(props) {
        super(props);
        //初始化state
        this.state={
            count:0
        }
        //处理this指向问题
        console.warn('生命周期钩子函数：constructor')
    }
    //1 进行DOM操作
    //2 发送ajax请求，获取远程数据
    componentDidMount(props) {
        console.warn('生命周期钩子函数：componentDidMount')
    }
    render(props) {
        console.warn('生命周期钩子函数：render')
        return (
            <div>
                <h1>统计豆豆被打的次数</h1>
                <button id="btn">打豆豆</button>
            </div>
        )
    }
}
ReactDOM.render(<App/>, document.getElementById('root'))

2.更新时（更新阶段）

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class App extends React.Component{
    constructor(props) {
        super(props);
        //初始化state
        this.state={
            count:0
        }
    }
    handleClick=()=>{
        this.setState({
            count:this.state.count + 1
        })
    }
    render() {
        console.warn('生命周期函数：render')
        return (
            <div>
                <Counter count={this.state.count} />
                <button onClick={this.handleClick}>打豆豆</button>
            </div>
        )
    }
}
class Counter extends React.Component{
    render() {
        console.warn('--子组件--生命周期函数：render')

        return (
            <div>
                <h1 id="title">统计豆豆被打的次数:{this.props.count}</h1>
            </div>
        )
    }
    //注意：如果要调用setState() 更新状态，必须要放在一个if条件中
  componentDidUpdate(prevProps) {
      console.warn('--子组件--生命周期函数：componentDidUpdate')
      // 错误演示！！！！
      // this.setState({})

      //正确做法：比较更新前后的props是否相同，来决定是否重新渲染组件
      console.log('上一次的props：',prevProps,',当前的props：',this.props)
      if(prevProps.count!==this.props.count){
          // this.setState({})
      //    发送ajax请求的代码
      }
      //获取Dom
      // const title=document.getElementById('title')
      // console.log(title.innerHTML)
  }
}
ReactDOM.render(<App/>, document.getElementById('root'))

3.卸载时（卸载阶段）

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

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class App extends React.Component{
    constructor(props) {
        super(props);
        //初始化state
        this.state={
            count:0
        }
    }
    handleClick=()=>{
        this.setState({
            count:this.state.count + 1
        })
    }
    render() {
        return (
            <div>
                {
                    this.state.count>3
                    ?<p>豆豆被打死了~~</p>
                        :<Counter count={this.state.count} />
                }
                <button onClick={this.handleClick}>打豆豆</button>
            </div>
        )
    }
}
class Counter extends React.Component{
    componentDidMount(){
        //开启定时器
        this.timerId=setInterval(()=>{
            console.log('定时器正在执行~~')
        },1000)
    }
    render() {
        return <h1 >统计豆豆被打的次数:{this.props.count}</h1>
    }
    componentWillUnmount() {
        console.log("生命周期钩子函数：componentWillUnmount")
        //清理定时器
        clearInterval(this.timerId)
    }
}
ReactDOM.render(<App/>, document.getElementById('root'))