React组件的生命周期

Posted 2021-11-02 遥岑.

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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'))