大家先看一张关于组件挂载的经典的图片:

下面一一说一下这几个生命周期的意义:

getDefaultProps

object getDefaultProps()

执行过一次后,被创建的类会有缓存,映射的值会存在this.props,前提是这个prop不是父组件指定的 
这个方法在对象被创建之前执行,因此不能在方法内调用this.props ,另外,注意任何getDefaultProps()返回的对象在实例中共享,不是复制

getInitialState

object getInitialState()

控件加载之前执行,返回值会被用于state的初始化值

componentWillMount

void componentWillMount()

执行一次,在初始化render之前执行,如果在这个方法内调用setStaterender()知道state发生变化,并且只执行一次

render

ReactElement render()

render的时候会调用render()会被调用 
调用render()方法时,首先检查this.propsthis.state返回一个子元素,子元素可以是DOM组件或者其他自定义复合控件的虚拟实现 
如果不想渲染可以返回null或者false,这种场景下,react渲染一个<noscript>标签,当返回null或者false时,ReactDOM.findDOMNode(this)返回null 
render()方法是很纯净的,这就意味着不要在这个方法里初始化组件的state,每次执行时返回相同的值,不会读写DOM或者与服务器交互,如果必须如服务器交互,在componentDidMount()方法中实现或者其他生命周期的方法中实现,保持render()方法纯净使得服务器更准确,组件更简单

componentDidMount

void componentDidMount()

在初始化render之后只执行一次,在这个方法内,可以访问任何组件,componentDidMount()方法中的子组件在父组件之前执行

从这个函数开始,就可以和 js 其他框架交互了,例如设置计时 setTimeout 或者 setInterval,或者发起网络请求

shouldComponentUpdate

boolean shouldComponentUpdate(object nextProps, object nextState
}

这个方法在初始化render时不会执行,当props或者state发生变化时执行,并且是在render之前,当新的props或者state不需要更新组件时,返回false

shouldComponentUpdate: function(nextProps, nextState) {return nextProps.id !== this.props.id;
}

shouldComponentUpdate方法返回false时,就不会执行render()方法,componentWillUpdatecomponentDidUpdate方法也不会被调用

默认情况下,shouldComponentUpdate方法返回true防止state快速变化时的问题,但是如果·state不变,props只读,可以直接覆盖shouldComponentUpdate用于比较propsstate的变化,决定UI是否更新,当组件比较多时,使用这个方法能有效提高应用性能

componentWillUpdate

void componentWillUpdate(object nextProps, object nextState
)

propsstate发生变化时执行,并且在render方法之前执行,当然初始化render时不执行该方法,需要特别注意的是,在这个函数里面,你就不能使用this.setState来修改状态。这个函数调用之后,就会把nextPropsnextState分别设置到this.propsthis.state中。紧接着这个函数,就会调用render()来更新界面了

componentDidUpdate

void componentDidUpdate(object prevProps, object prevState
)

组件更新结束之后执行,在初始化render时不执行

componentWillReceiveProps

void componentWillReceiveProps(object nextProps
)

props发生变化时执行,初始化render时不执行,在这个回调函数里面,你可以根据属性的变化,通过调用this.setState()来更新你的组件状态,旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的,并不会触发额外的render调用

componentWillReceiveProps: function(nextProps) {this.setState({likesIncreasing: nextProps.likeCount > this.props.likeCount});
}

componentWillUnmount

void componentWillUnmount()

当组件要被从界面上移除的时候,就会调用componentWillUnmount(),在这个函数中,可以做一些组件相关的清理工作,例如取消计时器、网络请求等

转载于:https://www.cnblogs.com/SharkChilli/p/8441102.html

react生命周期钩子相关推荐

  1. React 生命周期 钩子函数

    React15 挂载过程 // 完成了React数据的初始化. props.state constructor() // 组件已经完成初始化数据,但是还未渲染DOM时执行的逻辑 componentWi ...

  2. Vue.js 系列教程 3:Vue-cli,生命周期钩子

    原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...

  3. vue生命周期图示中英文版Vue实例生命周期钩子

    vue生命周期图示中英文版Vue实例生命周期钩子 知乎上近日有人发起了一个 "react 是不是比 vue 牛皮,为什么?" 的问题,Vue.js 作者尤雨溪12月4日正面回应了该 ...

  4. 你不可不知道的React生命周期

    点小蓝字加关注! 作者:kim 来源:原创 写在前面 咱今天聊的话题是React生命周期,灵感来自于最近在网上发现一篇关于react生命周期的文章,里面记录的知识点竟然与小编所get到的有出入.作为一 ...

  5. ES6中的React生命周期详解

    太长时间没写react了,有点生.重新捡起来练练手. import React,{ Component } from 'react';class Demo extends Component {con ...

  6. react生命周期方法介绍

    react生命周期 react生命周期主要包括三个阶段:初始化阶段.运行中阶段.销毁阶段 react在不同的生命周期会触发不同的钩子函数 初始化阶段 getDefaultProps() 设置组件默认的 ...

  7. vue生命周期和react生命周期对比。

    生命周期 指的是组件从初始化开始到结束的过程 或者是生命周期是描述组件从开始到结束的过程,每个组件都具有生命周期,都对组件通过生命周期给予的钩子函数进行管理. 钩子函数 指的是系统某些状态和参数发生改 ...

  8. react生命周期及hooks

    生命周期(新旧对比) 旧版生命周期 旧版生命周期 指的是 React 16.3 及其之前的版本. 新版生命周期 static getDerivedStateFromProps static getDe ...

  9. 【React生命周期】

    React 生命周期 从图上可以知道react 生命周期可以分为三个状态 挂载时 更新时 卸载时 挂载阶段 constructor :初始化阶段 可以接受来自super(props)或者父组件传递的p ...

最新文章

  1. 网络推广外包——网络推广外包专员是如何发布软文外链的呢?
  2. Python图像处理库PIL从入门到精通
  3. Go的marshal unmarshal
  4. C#高级编程9 第17章 使用VS2013-C#特性
  5. 米拓建站系统(MetInfo CMS)文章定时发布软件
  6. c#写图像tif gdal_Gdal系列 (二)读取图像基本操作b + 简单波段合成
  7. Django 基础,创建一个Django,并成功在网页中运行
  8. 二项式法在负荷计算机的应用,7.5二项式法确定计算负荷
  9. Jenkins+maven+SVN构建java项目中遇到的问题及解决
  10. RS485最大通讯距离和RS485接口定义
  11. java图书馆登陆代码_Java实现图书馆管理系统代码
  12. java bitwise_Java Core.bitwise_and方法代码示例
  13. Xilinx Zynq ZynqMP boot模式
  14. Qt 之 QuaZIP(zip 压缩/解压缩)
  15. 快收藏!最适合计算机大学生的Java毕业设计项目--音乐视频网站系统!
  16. TGA图像文件格式解析
  17. 基于微信小程序的服装童装商城+后台管理系统(SSM+mysql)-JAVA.VUE【毕业设计、论文、源码、开题报告】
  18. shardingjdbc 实现读写分离
  19. AAAI 安全挑战者第八期记录
  20. 使用QT开发2048小游戏

热门文章

  1. windows系统 ping Telnet等系统自带命令无法使用原因及解决方法
  2. RSA加密算法【手把手解释】
  3. 暴力破解(一)——python脚本暴力破解 加密的zip压缩文件
  4. 拦截器ConnectInterceptor
  5. python爬虫之bs4库_三分钟搞定bs4库的解析器
  6. 集合类型及其操作(复习)
  7. 一则故事表达:并发,并行,同步,异步,线程,多线程
  8. python【字符串】【转义符】【下标】【切片】【遍历】
  9. Progressive Scramble 复杂模拟
  10. 技巧|BurpSuite实现监听代理流量,隐匿身份