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

  • 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. css 添加伪元素 消除浮动 对父元素高度产生的影响

  2. phpstorm、webstorm配置less编译器

    1. node.js 安装包    https://nodejs.org/en/download/ 1) 安装js解析器node.js.直接下一步就ok了. 2) 将npm压缩包解压,找到里面的les ...

  3. sql server不能删除数据库,显示错误:正在使用

    解决办法: use mastergoalter database database_name set single_user with rollback immediate --将数据库回滚到原始配置 ...

  4. 【排序】冒泡排序,C++实现

    原创文章,转载请注明出处! 博客文章索引地址 博客文章中代码的github地址 # 基本思想(从小到大排序)       对于给定的n个元素,从第一个元素开始,依次对相邻的两个元素进行比较,当前面的记 ...

  5. 在CentOS 7上安装GitLab

    网上安装gitlab的方法有一堆,由于墙的原因,没有一个能安装成功,最后终于在中文版官网上面找到了RPM包可以下载,进行一键安装: 中文官网地址:http://www.gitlab.cc/ 下载地址为 ...

  6. Redis安全性配置

    最近Redis刚爆出一个安全性漏洞,我的服务器就“光荣的”中招了.黑客攻击的基本方法是: 扫描Redis端口,直接登录没有访问控制的Redis 修改Redis存盘配置:config set dir / ...

  7. CF1117D Magic Gems

    CF1117D Magic Gems 考虑 \(dp\) , \(f[i]\) 表示用 \(i\) 个单位空间的方案数,答案即为 \(f[n]\). 对于一个位置,我们可以放 \(Magic\) 的, ...

  8. BZOJ1059 ZJOI2007 矩阵游戏 【二分图匹配】

    BZOJ1059 ZJOI2007 矩阵游戏 Description 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏--矩阵游戏.矩阵游戏在一个N*N黑白方阵进行(如同国际象棋一 ...

  9. 查询避免Unknown column ‘xxx’ in ‘where clause’

    但凡写过sql语句的人估计都曾经碰到过类似于Unknown column ‘xxx’ in ‘where clause’的问题. 单从字面理解,我们很容易得出列名不存在的结论,但是,很多时候起始并不是 ...

  10. UICollectionView官方使用示例代码研究

    注:这里是iOS6新特征汇总贴链接 iOS6新特征:参考资料和示例汇总 这个链接可以学习到UICollectionView的相关介绍:iOS6新特征:UICollectionView介绍 由于UICo ...