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

  • 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. poscms基于list标签实现的查询分页功能

    poscms系统本身有一个在查询页(search页面)实现的查询分页功能,基于系统封装的php函数dr_search_url() 但是今天的需求除了导航栏.列表页.详情页都实现查询功能外,关键是有两个 ...

  2. React-Native进阶_6.导航 Naviagtion传递数据并展示

    接着上面 Navigation 继续学习传递数据给下一个页面 onPress={() => this.props.navigation.navigate('Detail',{info:movie ...

  3. VERIFY DATABASE 正在异常终止。 (Microsoft SQL Server,错误: 3169)

    1.错误描述 标题: Microsoft SQL Server Management Studio ------------------------------ 备份介质验证失败: [文件: D:\S ...

  4. 学习三部曲:WHAT、HOW、WHY

    一个人学习的过程要经历以下三步,才可以说得上"学会"两字: 第一步:WHAT 所谓的"WHAT",就是搞清楚某个东东是什么?有什么用?有什么语法?有什么功能特性 ...

  5. zookeeper 学习命令

    ls /TianheSoft/nodesls /TianheSoft/nodes/localhost_2181-0000000000ls /TianheSoft/propsls /TianheSoft ...

  6. 高并发异步uwsgi+web.py+gevent

    为什么用web.py? python的web框架有很多,比如webpy.flask.bottle等,但是为什么我们选了webpy呢?想了好久,未果,硬要给解释,我想可能原因有两个:第一个是兄弟项目组用 ...

  7. ICE:slice语言常识整理

    ICE:Slice语言(二)--源文件和词法规则:    文件命名    Slice的源文件以.ice为扩展名.   对于大小写不区分的系统(例如DOS),文件的扩展名可以大写,也可以小写,例如Cli ...

  8. linux自学(九)之开始centos学习,安装数据库MariaDB

    上一篇:linux自学(八)之开始centos学习,安装tomcat 数据库我们不安装mysql,我网上看了好多资料发现mysql安装比较麻烦,我们这里安装同一个父亲的产品MariaDB.驱动,端口等 ...

  9. BZOJ1878 SDOI2009 HH的项链 【莫队】

    BZOJ1878 SDOI2009 HH的项链 Description HH有一串由各种漂亮的贝壳组成的项链.HH相信不同的贝壳会带来好运,所以每次散步 完后,他都会随意取出一段贝壳,思考它们所表达的 ...

  10. ruby 的数组操作

    转自:http://fujinbing.iteye.com/blog/1126232 1. & [ 1, 1, 3, 5 ] & [ 1, 2, 3 ] # => [1, 3] ...