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. 【javascript】ajax 基础

    什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 htt ...

  2. Python 初始—(装饰器)

    本质上也是函数的另一种表现形式,为其它函数丰富其功能,装饰其他函数,附加功能 在不改变被装饰的函数的源代码,而且不改变被装饰的函数的调用方式,因此被装饰的函数感知不到装饰器函数的存在 分解装饰器 函数 ...

  3. 【学时总结】 ◆学时·IV◆ 数位DP

    [学时·IV] 数位DP ■基本策略■ 说白了就是超时和不超时的区别 :) 有一些特别的题与数位有关,但是用一般的枚举算法会超时.这时候就有人提出了--我们可以用动态规划!通过数字前一位和后一位之间的 ...

  4. js jquery 权限单选 bug修改以及正确代码 购物车数量加减

    效果图废话不多直接上代码 用的avalon渲染,其实都是一样的 <div class="shop-arithmetic"> <a href="javas ...

  5. 【牛客 错题集】Linux系统方面错题合集

    前言:牛客Linux322道全部刷完,有些题目较老,甚至考核5系统,现在7都出来了几年了 = = 还有些题目解析的很好部分也摘录了进来.很多涉及嵌入式开发的选择题同样的摘录的作为了解使用 ------ ...

  6. [Ljava.lang.String; cannot be cast to java.lang.String报错的原因

    完整错误信息: java.lang.ClassCastException: [Ljava.lang.String; cannot be cast to java.lang.String 报这个错的原因 ...

  7. Pythond函数的参数使用操作注意事项

    定义函数的时候,我们把参数的名字和位置确定下来,函数的接口定义就完成了.对于函数的调用者来说,只需要知道如何传递正确的参数,以及函数将返回什么样的值就够了,函数内部的复杂逻辑被封装起来,调用者无需了解 ...

  8. python系列2之数据类型

    目录 Python数据类型 python的运算符 Python的循环与判断语句 python练习 Python作业 一.  Python的数据类型 1. 整型(int) <1>.  赋值 ...

  9. IDA 对 so 的动态调试

    将IDAPro根目录下dbgsrv 目录下的android_server(模拟器用android_x86_server,这里还是用真机好点)文件push 到安卓设备(比如/data/local/tmp ...

  10. ansible-2

    软件相关模块 rpm 和yum 的区别: rpm: redhat package manager :yum可以解决依赖关系 yum 源配置: cat /etc/yum.repos.d/epel.rep ...