react知识（二）组件的生命周期【装载过程】

深碍√TFBOYSˉ_ 2022-06-12 00:54 103阅读 0赞

react定义了组件的生命周期，分为如下三个阶段：

*  装载过程（Mount）组件第一次再dom里面渲染过程
 *  更新过程 （Update） 组件被重新渲染的过程
 *  卸载过程 （Unmount）组件从dom里面删除的过程。

这节我们来仔细分析下装载过程：依次调用函数顺序  
ES6的写法执行顺序，React.createClass的调用顺序跟这个不一样，这里不分析了

1.  constructor
2.  componentWillMount
3.  render
4.  componentDidMount

例子代码如下：

import React,{Component} from 'react';
    
    class ClickCounter extends Component{ 
      constructor(prop){
        super(prop);
        this._handleClick=this._handleClick.bind(this);
        this.state={
       count:0};
      }
      _handleClick(){
        console.log(this);
        console.log(this.state)
        this.setState({
       count:this.state.count+1});
      }
      componentWillMount(){
        console.log("------------componentWillMount----------------1")
      }
      componentDidMount(){
        console.log("------------componentDidMount------------3")
      }
      render(){
        console.log("-------------render--------------2")
        return (
          <div>
            <button onClick={
       this._handleClick}>click Me</button>
            <h1>click Count{
       this.state.count}</h1>
          </div>
        )
      }
    }
    
    export default ClickCounter;

可以看浏览器Console的输出，大概如下：

![这里写图片描述][SouthEast]

[SouthEast]: /images/20220612/16a99d0804fa47f7ae1a5e54e722b0cc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，103人围观）

还没有评论，来说两句吧...

相关阅读

相关 React组件和生命周期

React组件和生命周期 ![format_png][] 一 React组件组件是React的核心、精髓。组件有输入、输出以及自身状态，分别对应props、rende

素颜马尾好姑娘i/ 2023年07月03日 12:19/ 0 赞/ 45 阅读

相关 React组件生命周期过程说明

实例化首次实例化 > getDefaultProps > getInitialState > componentWillMount > ren

落日映苍穹つ/ 2022年06月16日 13:06/ 0 赞/ 232 阅读

相关浅谈React组件的生命周期

![Center][] 组件的生命周期有3个主要部分： 1) 实例化：组件被注入DOM。 2) 存在期：组件被重新渲染来决定DOM是否应被更新。 3)

太过爱你忘了你带给我的痛/ 2022年06月16日 03:56/ 0 赞/ 272 阅读

相关前端开发之React组件生命周期

React组件在加载时都有特定的生命周期，在此期间不同的方法会被执行。组件有三种状态：加载：组件实例从创建到最终显示在终端更新：组件加载完成后，组件的属性

比眉伴天荒/ 2022年06月16日 03:43/ 0 赞/ 271 阅读

相关 react知识（二）组件的生命周期【装载过程】

react定义了组件的生命周期，分为如下三个阶段：装载过程（Mount）组件第一次再dom里面渲染过程更新过程（Update）组件被重新渲染的过程

深碍√TFBOYSˉ_/ 2022年06月12日 00:54/ 0 赞/ 104 阅读

相关 React组件生命周期小结

React组件生命周期小结 ———- \这篇博客是我在简书上看到的，写的实在是太好了，\[这是原文地址\](http://www.jianshu.com/p/478421

淡淡的烟草味﹌/ 2022年06月03日 05:09/ 0 赞/ 241 阅读

相关 React组件的生命周期

概述 React组件的生命周期就是React组件从创建到消亡的过程。大致分为三个阶段： 1.Mounting 组件装载和初始化 2.Updatin

ゝ一纸荒年。/ 2022年06月03日 04:07/ 0 赞/ 288 阅读

相关 React组件的生命周期

![70][] var Hello = React.createClass({ getInitialState:function(){

墨蓝/ 2022年05月21日 12:40/ 0 赞/ 260 阅读

相关 React 组件生命周期

在本章节中我们将讨论 React 组件的生命周期。组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染

超、凢脫俗/ 2022年02月16日 10:15/ 0 赞/ 319 阅读

相关 React组件生命周期过程说明：forceUpdate强制更新

[ 编辑文章][Link 1] 实例化首次实例化 getDefaultProps getInitialState componentWil

Dear 丶/ 2021年09月18日 08:54/ 0 赞/ 1332 阅读