React/practise/30.组件的生命周期/01.组件挂载阶段.jsx

import React from 'react'

class App extends React.Component {
    // constructor 是创建组件时，最先执行，初始化的时候只执行一次
    // 作用：1.初始化 state  2.创建 ref  3.使用 bind 解决 this 指向问题等
    constructor () {
        super()
        console.log('constructor')
    }

    state = {
        count: 0
    }

    clickHandler = () => {
        this.setState ({
            count: this.state.count + 1
        })
    }

    // componentDidMount 是组件挂载（渲染 DOM 渲染）后执行，初始化的时候执行一次  (类似 vue 中的 mounted)
    // 作用：1.发送网络请求   2.DOM 操作
    componentDidMount () {
        console.log('componentDidMount')
    }

    // render 是每次组件渲染都会触发
    // 作用：渲染 UI （注意，不能在里面调用 setState() ）
    render () {
        console.log('render')
        return (
            <div>
                this is div
                <button onClick={this.clickHandler}>{this.state.count}</button>
            </div>
        )
    }
}

export default App