组件的生命周期主要由三个部分组成:

  • Mounting:组件正在被插入DOM中
  • Updating:如果DOM需要更新,组件正在被重新渲染
  • Unmounting:组件从DOM中移除

React提供了方法,让我们在组件状态更新的时候调用,will标识状态开始之前,did表示状态完成后。例如componentWillMount就表示组件被插入DOM之前。

Mounting

  • getInitialState():初始化state
  • componentWillMount():组件被出入DOM前执行
  • componentDidMount():组件被插入DOM后执行

Updating

  • componentWillReceiveProps(object nextProps):组件获取到新的属性时执行,这个方法应该将this.props同nextProps进行比较,然后通过this.setState()切换状态
  • shouldComponentUpdate(object nextProps, object nextState):组件发生改变时执行,应该将this.props和nextProps、this.stats和nextState进行比较,返回true或false决定组件是否更新
  • componentWillUpdate(object nextProps, object nextState):组件更新前执行,不能在此处调用this.setState()。
  • componentDidUpdate(object prevProps, object prevState):组件更新后执行

Unmounting

  • componentWillUnmount():组件被移除前执行

Mounted Methods

  • findDOMNode():获取真实的DOM
  • forceUpdate():强制更新

react组件生命的更多相关文章

  1. React组件生命周期小结

    React组件生命周期小结 下面所写的,只适合前端的React.(React也支持后端渲染,而且和前端有点小区别,不过我没用过.) 相关函数 简单地说,React Component通过其定义的几个函 ...

  2. React—组件生命周期详解

    React—组件生命周期详解 转自 明明的博客  http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...

  3. 野心勃勃的React组件生命周期

    当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件    React实现了UI=Fn(St ...

  4. React组件生命周期过程说明

    来自kiinlam github94 实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidM ...

  5. React组件生命周期过程说明【转】

    实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidMount 实例化完成后的更新 getI ...

  6. 深入React组件生命周期

    上篇博文使用React开发的一些注意要点对React开发的一些重点进行了简单的罗列总结,虽然也提到了React生命周期,但只略微小结,在此单独写篇React生命周期的总结. 在组件的整个生命周期中,随 ...

  7. react组件生命周期过程

    实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidMount 实例化完成后的更新 getI ...

  8. 1.4 React 组件生命周期

    1.4.1 组件 React 中组件有自己的生命周期方法,简单理解可以为组件从 出生(实例化) -> 激活 -> 销毁 生命周期 hook.通过这些 hook 方法可以自定义组件的特性. ...

  9. 3. React 组件生命周期介绍

            React 中的每个组件都有三个阶段,这三个阶段构成了组件完整的生命周期.组件的生命周期为]); return; } this.setState({name: event.target ...

随机推荐

  1. 【Spring实战】Spring注解配置工作原理源码解析

    一.背景知识 在[Spring实战]Spring容器初始化完成后执行初始化数据方法一文中说要分析其实现原理,于是就从源码中寻找答案,看源码容易跑偏,因此应当有个主线,或者带着问题.目标去看,这样才能最 ...

  2. 关于Instruments-Leaks工具的归纳总结

    前言: 本篇文章,在于学习,我把别人的一些感觉好的文章汇总成了一篇,亲自实现了一下,留用于今后学习资料. 文章脉络: 文章脉络: 一.内存优化 简介:Objective_C 有3种内存管理方法, 它们 ...

  3. Linux基础三(正则表达式)

    语法(部分) 字符 描述 \ 将下一个字符标记为一个特殊字符.或一个原义字符.例如,“n”匹配字符“n”.“\n”匹配一个换行符.序列“\\”匹配“\”而“\(”则匹配“(”. ^ 匹配输入字符串的开 ...

  4. 2018秋C语言程序设计(初级)作业- 第3次作业

    7-1 找出最小值 #include<stdio.h> int main() { int min,i,n,count; scanf("%d",&n); for( ...

  5. 使用PE工具箱 ughost 恢复系统导致被捆绑一堆软件的问题

    很多的pe系统,都有这么一个东西, 没啥技术含量,就是给ghost 加一个UI 而已 , 但是使用这玩意恢复系统,会被感染一些捆绑软件 ,开机之后就会卡顿, 并下载一堆软件 包括  爱奇艺 , 百度搜 ...

  6. [译]缓解BEAST对TLS攻击的方式

    原文链接:https://community.qualys.com/blogs/securitylabs/2011/10/17/mitigating-the-beast-attack-on-tls 原 ...

  7. BZOJ5435: 取石子(博弈)(占位)

    5435: 取石子 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 35  Solved: 10[Submit][Status][Discuss] De ...

  8. HDU3833 YY's new problem 卡时间第一题

    Given a permutation P of 1 to N, YY wants to know whether there exists such three elements P[i 1], P ...

  9. 每天一个linux命令:【转载】less命令

    less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more 更加的有弹性.在 more 的时候,我们并没有办法向前面翻 ...

  10. Java 按行拆分txt

    T028619630|@|聚二零|@|M|@|1983-01-01|@|0|@|110101198301010098|@||@||@||@|湖南省衡阳市耒阳市蔡伦步行街1005号302|@|42100 ...