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. Spring boot 自动配置自定义配置文件

    示例如下: 1.   新建 Maven 项目 properties 2.   pom.xml <project xmlns="http://maven.apache.org/POM/4 ...

  2. 微信小程序开发：禁止输入表情的控制，验证方法，光标控制

    <input class="weui-input" name="receiptMan" maxlength="10" bindinpu ...

  3. JSON 与 XML 的比较 - iOS

    在与 web 服务进行数据交换的时候,通常支持两种主要的数据格式(即:JavaScript 对象表示法 JSON 与可扩展标记语言 XML),两者在可读性上都不分高下,接下来对此进行简单的总结和分析, ...

  4. C编程经验总结4

    {}体里的语句不管在一行还是在多行,之间都是要有: for与for之间可以是独立的,也可以是相互嵌套的 For( ; i<5; )=for( ;i<=4;  ) 一般都是在循环里面进行判断 ...

  5. nginx虚拟主机搭建

    nginx [engine x]是 Igor Sysoev 编写的一个 HTTP 和反向代理服务器,另外它也可以 作为邮件代理服务器. 它已经在众多流量很大的俄罗斯网站上使用了很长时间,这些网站包括 ...

  6. tp5 使用技巧（持续更新中...）

    tp5 使用技巧(持续更新中...) 1.自动写入时间 create_time和update_time 使用save方法才行,insert方法不生效,不知为何 2.过滤字段 allowfield和st ...

  7. 如何导入CSV数据 （python3.6.6区别于python2 环境）

    1.python2环境下 2.python3.6.6环境下 如果用python2环境下的代码,在python3.6.6环境下编译会出现以下问题: 错误(1): SyntaxError:Missing ...

  8. attention发展历史及其相应论文

    这个论文讲述了attention机制的发展历史以及在发展过程的变体-注意力机制(Attention Mechanism)在自然语言处理中的应用 上面那个论文提到attention在CNN中应用,有一个 ...

  9. Aizu：0189-Convenient Location

    Convenient Location Time limit 1000 ms Memory limit 131072 kB Problem Description 明年毕业的A为就业而搬家.就职的公司 ...

  10. 2286: [Sdoi2011]消耗战

    2286: [Sdoi2011]消耗战 链接 分析 虚树练习题. 构建虚树,在虚树上DP. 跟着gxb学虚-tree... 代码 #include <cstdio> #include &l ...