React组件的生命周期

组件的生命周期概述

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

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

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

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

生命周期的三个阶段

1.每个阶段的执行时机

2.每个阶段钩子函数的执行顺序

3.每个阶段钩子函数的作用

1.创建时（挂载阶段）

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

· 执行顺序：

constructor() → render() → componetDidMount

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.less';
 
/*组件生命周期*/
class App extends React.Component {
    constructor(props) {
        super(props)

        //初始化state
        this.state = {
            count: 0
        }
        //处理this指向问题

        console.warn('生命周期钩子函数： constructor')
    }

    //1 进行DOM操作
    //2 发送Ajax请求，获取远程数据
    componentDidMount() {
        console.warn('生命周期钩子函数：componentDidMount')
    }

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

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

 2.更新时（更新阶段）

· 执行时机：1.setState() 2.forceUpdate() 3.组件接收到新的props

· 说明：以上三者任意一种变化，组件就会重新渲染

· 执行顺序：

render() → componentDidUpdate()

 3.卸载时（卸载阶段）

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