好客租房59-组件的生命周期三个阶段-1创建时

简介: 好客租房59-组件的生命周期三个阶段-1创建时

1每个阶段的执行时机

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

3每个阶段狗子函数的作用

图片.png

6.2生命周期的三个极端


执行时机


执行顺序


construtor()->render()->componentDidMount

图片.png

//导入react
import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
//导入组件
// 约定1:类组件必须以大写字母开头
// 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
// 约定3:组件必须提供render方法
// 约定4:render方法必须有返回值
class App extends React.Component{
    constructor(props){
        super(props)
        console.log('生命周期钩子函数:construtor')
        this.state={
            count:0
        }
    }
    //初始化state
    //1进行dom操作
    //2发送网络请求
    componentDidMount(){
        const title=document.getElementById("title")
        console.log(title,"title")
        console.log('生命周期钩子函数:componentDidMount')
    }
    render(){
        console.log('生命周期钩子函数:render')
        return (
            <div id='title'>
                <h1>统计豆豆被打的次数:</h1>
                <button id='btn'>打豆豆</button>
            </div>
        )
    }
}
ReactDOM.render(<App></App>, document.getElementById('root'))

运行结果

图片.png

相关文章
|
1月前
|
数据采集 机器学习/深度学习 监控
业务分析师项目全生命周期为以下哪几个阶段
业务分析师项目全生命周期为以下哪几个阶段
31 0
|
JavaScript 前端开发
数据工厂平台11:首页收尾
数据工厂平台11:首页收尾
数据工厂平台11:首页收尾
好客租房61-组件的生命周期三个阶段-3更新时
好客租房61-组件的生命周期三个阶段-3更新时
106 0
好客租房61-组件的生命周期三个阶段-3更新时
|
前端开发
好客租房60-组件的生命周期三个阶段-2更新时
好客租房60-组件的生命周期三个阶段-2更新时
116 0
好客租房60-组件的生命周期三个阶段-2更新时
好客租房62-组件的生命周期三个阶段-4卸载时
好客租房62-组件的生命周期三个阶段-4卸载时
112 0
好客租房62-组件的生命周期三个阶段-4卸载时
好客租房63-组件的生命周期三个阶段-5不常用钩子函数介绍
好客租房63-组件的生命周期三个阶段-5不常用钩子函数介绍
92 0
好客租房63-组件的生命周期三个阶段-5不常用钩子函数介绍
好客租房80-组件更新机制
好客租房80-组件更新机制
96 0
好客租房80-组件更新机制
|
前端开发 JavaScript
好客租房71-高阶组件使用步骤
好客租房71-高阶组件使用步骤
105 0
好客租房71-高阶组件使用步骤
好客租房103-初始化项目
好客租房103-初始化项目
77 0
好客租房103-初始化项目
|
前端开发
好客租房51-通讯的三种方式(子组件传递给父组件)
好客租房51-通讯的三种方式(子组件传递给父组件)
118 0
好客租房51-通讯的三种方式(子组件传递给父组件)
下一篇
无影云桌面