React组件的生命周期

React组件的生命周期

意义：组件的生命周期有助于理解组件的运行方式，完成更复杂的组件功能、分析组件错误原因等。
组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程。
生命周期的每个阶段总是伴随着一些方法的调用，这些方法就是生命周期的钩子函数。
钩子函数的作用：为开发人员在不同阶段操作组件提供了时机。
只有类组件才有生命周期。

创建时（挂载阶段）

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

执行顺序：

• constructor( )
  触发时机：创建组件时，最先执行。
  作用：①初始化state ②为事件处理程序绑定this

• render( )
  触发时机：每次组件渲染都会触发。
  作用：渲染UI（注意不能调用setState( ) ）

• componentDidMount( )
  触发时机：组件挂载（完成DOM渲染）后。
  作用：①发送网络请求（发送ajax请求，获取远程数据） ②DOM操作

演示：

class App extends React.Component {
    constructor(props) {
        super(props)
        console.warn('生命周期钩子函数：constructor')
        this.state = {
            count:0
        }
    }

    componentDidMount() {
        const title = document.querySelector('#title')
        console.log(title)
        console.warn('生命周期钩子函数：componentDidMount')
    }

    //不要再render中调用setState方法 setState就有更新UI的功能 他自己也会调用render 两个在一块会报错
    render() {
        console.warn('生命周期钩子函数：render')

        return (
            <div>
                <h1 id='title'>统计豆豆被打的次数：</h1>
                <button id='btn'>打豆豆</button>
            </div>
        )
    }
}
ReactDOM.render(<App/>,document.querySelector('#root'))

更新时（更新阶段）

执行时机：①setState( ) ②forceUpdate( ) ③组件接收到新的props。
说明：以上三者任一种变化，组件就会重新渲染。
执行顺序：

• render( )
  触发时机：每次组件渲染都会触发。
  作用：渲染UI（与挂载阶段是同一个render）
• componentDidUpdate( )
  触发时机：组件更新（完成DOM渲染）后。
  作用：①发送网络请求 ②DOM操作（注意，如果要setState()必须放在一个if条件中）

class App extends React.Component {
     constructor(props) {
         super(props)
         
         this.state = {
             count:0
         }
     }

     //打豆豆
     add = ()=> {
         //调用setState组件重新渲染
         this.setState({
             count: this.state.count + 1
         })

         //强制更新
         // this.forceUpdate()
     }

     render() {
         console.warn('生命周期钩子函数：render')

         return (
             <div>
                 <Counter count={this.state.count}/>
                 <button onClick={this.add}>打豆豆</button>
             </div>
         )
     }
 }

 class Counter extends React.Component {
     render() {
         console.warn('子组件生命周期钩子函数：render')
         return (
             <div>
                 <h1 id='title'>统计豆豆被打的次数：{this.props.count}</h1>
             </div>

         )
     }

     componentDidUpdate(prevProps) {
         console.warn('子组件生命周期钩子函数：componentDidUpdate')

         //比较更新前后的props是否相同 来决定是否重新渲染组件
         console.log('上一次的props:',prevProps,'，当前的props:',this.props)
         if(prevProps.count !== this.props.count) {
             this.setState({})
         }

         //DOM操作
         // const title = document.querySelector('#title')
         // console.log(title.innerHTML)
     }
 }

 ReactDOM.render(<App/>,document.querySelector('#root'))

卸载时（卸载阶段）

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

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

class App extends React.Component {
    constructor(props) {
        super(props)
        
        this.state = {
            count:0
        }
    }

    //打豆豆
    add = ()=> {
        //调用setState组件重新渲染
        this.setState({
            count: this.state.count + 1
        })
    }

    render() {
        return (
            <div>
                {
                    this.state.count>3?<p>豆豆被打死了</p>:<Counter count={this.state.count}/>
                }
                <button onClick={this.add}>打豆豆</button>
            </div>
        )
    }
}

class Counter extends React.Component {
    componentDidMount() {
        //开启定时器
        this.timeId = setInterval(()=> {
            console.log('定时器正在执行')
        },1000)
    }

    render() {
        return (
            <div>
                <h1 id='title'>统计豆豆被打的次数：{this.props.count}</h1>
            </div>

        )
    }

    componentWillUnmount() {
        console.warn('生命周期钩子函数：componentWillUnmount')

        //清除定时器
        //在组件中执行了一些不是react自身的操作 记得最后清理掉 否则可能会造成内存泄漏等问题
        clearInterval(this.timeId)
    }
}



ReactDOM.render(<App/>,document.querySelector('#root'))

不常用的钩子函数

旧版：

生命周期流程:

第一次初始化渲染显示：

• constructor(): 创建对象初始化 state
• componentWillMount() : 将要插入回调
• render() : 用于插入虚拟 DOM 回调
• componentDidMount() : 已经插入回调

每次更新state:

• componentWillUpdate() : 将要更新回调
• render() : 更新(重新渲染)
• componentDidUpdate() : 已经更新回调

移除组件:

• componentWillUnmount() : 组件将要被移除回调

新版：