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

  • 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. RxJava 1.x 笔记:变换型操作符

    在写这几篇 RxJava 笔记时,发现官方文档很久都没有更新啊. 一些前辈两年前写的学习笔记内容跟现在也基本一致,RxJava 2.x 的文档也基本没有,不知道是不是缺实习生. 本文内容为 RxJav ...

  2. iOS怎么来实现关闭自动锁屏

    怎么来设置[UIApplication sharedApplication]   idleTimerDisabled 属性来控制自动锁屏的效果 // 把设置idleTimerDisabled的代码放到 ...

  3. caffe 一些网络参数

    caffe一些网络参数的:http://www.docin.com/p-871820919.html

  4. java web构建学习(概念基础)

    1.什么是Java Web Application 一个Java web应用程序生成交互式web页面包含各种类型的标记语言(HTML.XML等)和动态内容.它通常由web组件例如JavaServer ...

  5. Luogu3387 缩点 【tarjan】【DP】

    Luogu3387 缩点 题目背景 缩点+DP 题目描述 给定一个n个点m条边有向图,每个点有一个权值,求一条路径,使路径经过的点权值之和最大.你只需要求出这个权值和. 允许多次经过一条边或者一个点, ...

  6. Mac OS X系统 HomeBrew的安装和简单使用

    1. 前言 作为linux系统的忠实粉丝,我们都很喜欢 (Debian/Ubuntu)系列的apt包管理系统和(Redhat/Fedora)系列的yum包管理系统. 包括Windows用户都有多种方便 ...

  7. 【DUBBO】Dubbo:protocol 的配置项

    [一]:配置项 <dubbo:protocol id="标识" port="端口号" name="名字"/> [二]:配置解析器 ...

  8. Sprint第一个冲刺(第三天)

    一.Sprint介绍 今天我们完成了简单登录界面及美化的任务,完成了此次整个Sprint的百分之十五. 下面是实验截图: 二.Sprint周期 看板: 燃尽图:

  9. Jitsi 开源视频会议远程桌面共享&&文档共享工具

    1. 特点 主要功能特点: 支持网络视频会议,使用SFU模式实现视频路由器功能. 支持SIP帐号注册电话呼叫. 支持安卓苹果终端. 支持文档共享功能,即时消息功能. 支持中文界面. 支持会议邀请,密码 ...

  10. guaua学习,工具专题

    Preconditions 1,http://www.cnblogs.com/peida/p/Guava_Preconditions.html 1 .checkArgument(boolean) : ...