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

  • 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. ubuntu16安装git

    执行一条命令就可以: sudo apt-get install git

  2. angularjs 阻止浏览器自带的回退

    $scope.$on('$locationChangeStart', function(e) { if(!tfOrder && comm.getStorage('orederlistL ...

  3. tensorflow 初学习

    tenseroflow 拟合 y = ax*x+b构建神经网络主要分为 4 个步骤:构造数据.构建网络.训练模型.评估及预测模型.此外,还介绍了一些超参数设定的经验和技巧 #coding=utf-8 ...

  4. docker下的Jenkins安装和体验【转】

    原文地址:http://blog.csdn.net/boling_cavalry/article/details/78942408 作为一款优秀的持续集成工具,jenkins在日常的项目中经常会用到, ...

  5. [转]redis服务器与客户端保活参数(tcp-keepalive)设置

    最近使用redis的list做跨进程的消息队列,客户端使用的是redis-cplusplus-client.这个client库还是蛮好用的,提供了和redis命令行一致的接口,很方便. 使用过程中发现 ...

  6. Markdown 效果测试

    欢迎使用 Cmd - 在线 Markdown 编辑阅读器 \[ \int e^{-x^2 - y^2} dx = \sqrt{2 \pi} \] 我们理解您需要更便捷更高效的工具记录思想,整理笔记.知 ...

  7. Ubuntu中apt-get安装或更新软件错误的解决办法

    $su #apt-get clean #cd /var/lib/apt #mv lists lists.back #mkdir -p lists/partial #apt-get clean #apt ...

  8. 语义版本号(Semantic Versioning)

    版本号格式不陌生吧,.NET 传统的版本号格式类似这样 1.5.1254.0.本文将推荐一种新的版本号格式——语义版本号,格式类似这样 1.4.6-beta.我推荐语义版本号是因为这样的版本号自包含语 ...

  9. 零基础学习hadoop到上手工作线路指导初级篇:hive及mapreduce

      此篇是在零基础学习hadoop到上手工作线路指导(初级篇)的基础,一个继续总结.五一假期:在写点内容,也算是总结.上面我们会了基本的编程,我们需要对hadoop有一个更深的理解:hadoop分为h ...

  10. svn问题解答

    一.svn在提交文件是报错:previous operation has not finished;run 'cleanup' if it was interrupted 原因,工作队列被占用,只需在 ...