Mounting阶段，当一个组件的实例被创建并插入到DOM中时，下面这些函数会被调用：
constructor()
componentWillMount：组件即将被渲染到页面上，render之前最后一次修改状态的机会
render：生成虚拟的DOM节点，只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出
componentDidMount：组件已经渲染到页面上，成功render并渲染完成真实的DOM之后触发，可以修改DOM
Updating阶段，属性和状态的修改会导致更新，当一个组件被re-render时会调用以下函数：
componentWillRecieveProps:组件将要接收到属性时调用，父组件修改属性触发，可以修改新属性、修改状态
shouldComponentUpdate:当组件接受到新属性或新状态时触发，判断组件是否需要更新，返回false会阻止render调用
componentWillUpdate:组件将要更新，不能修改属性和状态
render：同上
componentDidUpdate:组件已经更新，可以修改DOM
Unmounting阶段，当一个组件被移出DOM时调用
componentWillUnmount:在删除组件之前进行清理操作，比如计时器和事件监听器

react生命周期方法的更多相关文章

  1. react生命周期方法有哪些？

    react生命周期方法有哪些? React 16.3+ getDerivedStateFromProps:在调用render()之前调用,并在每次渲染时调用.需要使用派生状态的情况是很罕见的 comp ...

  2. react篇章-React State(状态)-将生命周期方法添加到类中

    将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要. 每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载. ...

  3. React 组件的生命周期方法

    React 组件的生命周期方法 按渲染顺序: 1: componentWillMount() – 在渲染之前执行,在客户端和服务器端都会执行. 2: componentDidMount() – 仅在第 ...

  4. React生命周期浅析

    引言 关于React的生命周期API,官网,有着详细说明.但在实际写代码的过程中,这些说明不能解决所有的疑惑. 所以我列举了一些编码中常见用例,供大家参考. 示例代码如下 /* use case 1. ...

  5. React生命周期详解

    React生命周期图解: 一.旧版图解: 二.新版图解: 从图中,我们可以清楚知道React的生命周期分为三个部分:  实例化.存在期和销毁时. 旧版生命周期如果要开启async rendering, ...

  6. 22.1 、react生命周期(一)

    在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论 组件生命周期概述 1.初始化 在组件初始化阶段会执行 constructor static getDerivedStateF ...

  7. react复习总结（2）--react生命周期和组件通信

    这是react项目复习总结第二讲, 第一讲:https://www.cnblogs.com/wuhairui/p/10367620.html 首先我们来学习下react的生命周期(钩子)函数. 什么是 ...

  8. React生命周期执行顺序详解

    文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...

  9. react生命周期es6

    基本函数有 import React from 'react' export default class MyClass extends React.Component { constructor(p ...

随机推荐

  1. 旧文备份:怎样利用好单片机上的存储器资源来实现OD的存储与访问

    我们知道OD(对象字典)是CANopen的核心,所有功能都是围绕它开展的,是协议栈的数据中心,良好的OD实现是协议栈高效稳定运行的基础,而OD的实现最基本的一点就是怎么去保存它.因为OD的内容比较杂, ...

  2. No such file or directory 8356:error:02001003:system library:fopen:No such process:crypto\bio\bss_file.c:7 4:fopen

    使用OpenSSL生成证书,构建根证书前,需要构建随机数文件(.rand),命令如下: openssl rand - 报错如下: OpenSSL> rand - Can't open priva ...

  3. 2、SpringBoot------数据转换

    开发工具:STS 代码下载链接:https://github.com/theIndoorTrain/Springboot/tree/083bb312526653d27ca56abf4f586e097c ...

  4. postgresql 免安装版使用

    免安装版 postgresql 使用 1.首先使用 initdb 初始化数据目录 initdb --pgdata=data --encoding=UTF8 --locale=C 2.启动 postgr ...

  5. iOS 检测版本更新（02）

    iOS 检测版本更新 如果我们要检测app版本的更新,那么我们必须获取当前运行app版本的版本信息和appstore 上发布的最新版本的信息. 当前运行版本信息可以通过info.plist文件中的bu ...

  6. zeppelin ERROR总结

    ERROR [2017-03-23 20:01:50,799] ({qtp331657670-221} NotebookServer.java[onMessage]:221) - Can't hand ...

  7. 采坑笔记——mysql的order by和limit排序问题

    背景说明 今天写出一个十分弱智的bug,记录一下,提醒自己以后别这种犯错,不怕丢人哈~ 在写一个分页查询记录的sql时,要根据添加的时间逆序分页输出,之前的写法是酱紫 select record.a, ...

  8. 什么是web语义化？

    Web语义化:是指使用语义恰当的标签,使页面有良好的结构,页面元素更有含义,能够让人和搜索引擎都容易理解.使团队项目的可持续运作及维护,去掉样式后页面呈现清晰的结构. 例如:<table> ...

  9. elasticsearch 5.x 系列之七 基于索引别名的零停机升级服务

    一,写在前面的话,elasticsearch 建立索引时的Mapping 设置 建议你在设计索引的初期,就把索引的各个字段设计好,因为,elasticsearch 的各个字段,定义好类型后,就无法进行 ...

  10. 字典--数据结构与算法JavaScript描述(7)

    字典 字典是一种以键-值对形式存储数据的数据结构. Dictionary 类 Dictionary 类的基础是Array 类,而不是Object 类. function Dictionary( ){ ...