react生命周期钩子
大家先看一张关于组件挂载的经典的图片:
下面一一说一下这几个生命周期的意义:
getDefaultProps
object getDefaultProps()
执行过一次后,被创建的类会有缓存,映射的值会存在this.props
,前提是这个prop不是父组件指定的
这个方法在对象被创建之前执行,因此不能在方法内调用this.props
,另外,注意任何getDefaultProps()
返回的对象在实例中共享,不是复制
getInitialState
object getInitialState()
控件加载之前执行,返回值会被用于state的初始化值
componentWillMount
void componentWillMount()
执行一次,在初始化render
之前执行,如果在这个方法内调用setState
,render()
知道state发生变化,并且只执行一次
render
ReactElement render()
render的时候会调用render()
会被调用
调用render()
方法时,首先检查this.props
和this.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()
方法,componentWillUpdate
和componentDidUpdate
方法也不会被调用
默认情况下,shouldComponentUpdate
方法返回true防止state
快速变化时的问题,但是如果·state
不变,props
只读,可以直接覆盖shouldComponentUpdate
用于比较props
和state
的变化,决定UI是否更新,当组件比较多时,使用这个方法能有效提高应用性能
componentWillUpdate
void componentWillUpdate(object nextProps, object nextState )
当props
和state
发生变化时执行,并且在render
方法之前执行,当然初始化render时不执行该方法,需要特别注意的是,在这个函数里面,你就不能使用this.setState
来修改状态。这个函数调用之后,就会把nextProps
和nextState
分别设置到this.props
和this.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生命周期钩子相关推荐
- React 生命周期 钩子函数
React15 挂载过程 // 完成了React数据的初始化. props.state constructor() // 组件已经完成初始化数据,但是还未渲染DOM时执行的逻辑 componentWi ...
- Vue.js 系列教程 3:Vue-cli,生命周期钩子
原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子 知乎上近日有人发起了一个 "react 是不是比 vue 牛皮,为什么?" 的问题,Vue.js 作者尤雨溪12月4日正面回应了该 ...
- 你不可不知道的React生命周期
点小蓝字加关注! 作者:kim 来源:原创 写在前面 咱今天聊的话题是React生命周期,灵感来自于最近在网上发现一篇关于react生命周期的文章,里面记录的知识点竟然与小编所get到的有出入.作为一 ...
- ES6中的React生命周期详解
太长时间没写react了,有点生.重新捡起来练练手. import React,{ Component } from 'react';class Demo extends Component {con ...
- react生命周期方法介绍
react生命周期 react生命周期主要包括三个阶段:初始化阶段.运行中阶段.销毁阶段 react在不同的生命周期会触发不同的钩子函数 初始化阶段 getDefaultProps() 设置组件默认的 ...
- vue生命周期和react生命周期对比。
生命周期 指的是组件从初始化开始到结束的过程 或者是生命周期是描述组件从开始到结束的过程,每个组件都具有生命周期,都对组件通过生命周期给予的钩子函数进行管理. 钩子函数 指的是系统某些状态和参数发生改 ...
- react生命周期及hooks
生命周期(新旧对比) 旧版生命周期 旧版生命周期 指的是 React 16.3 及其之前的版本. 新版生命周期 static getDerivedStateFromProps static getDe ...
- 【React生命周期】
React 生命周期 从图上可以知道react 生命周期可以分为三个状态 挂载时 更新时 卸载时 挂载阶段 constructor :初始化阶段 可以接受来自super(props)或者父组件传递的p ...
最新文章
- 网络推广外包——网络推广外包专员是如何发布软文外链的呢?
- Python图像处理库PIL从入门到精通
- Go的marshal unmarshal
- C#高级编程9 第17章 使用VS2013-C#特性
- 米拓建站系统(MetInfo CMS)文章定时发布软件
- c#写图像tif gdal_Gdal系列 (二)读取图像基本操作b + 简单波段合成
- Django 基础,创建一个Django,并成功在网页中运行
- 二项式法在负荷计算机的应用,7.5二项式法确定计算负荷
- Jenkins+maven+SVN构建java项目中遇到的问题及解决
- RS485最大通讯距离和RS485接口定义
- java图书馆登陆代码_Java实现图书馆管理系统代码
- java bitwise_Java Core.bitwise_and方法代码示例
- Xilinx Zynq ZynqMP boot模式
- Qt 之 QuaZIP(zip 压缩/解压缩)
- 快收藏!最适合计算机大学生的Java毕业设计项目--音乐视频网站系统!
- TGA图像文件格式解析
- 基于微信小程序的服装童装商城+后台管理系统(SSM+mysql)-JAVA.VUE【毕业设计、论文、源码、开题报告】
- shardingjdbc 实现读写分离
- AAAI 安全挑战者第八期记录
- 使用QT开发2048小游戏
热门文章
- windows系统 ping Telnet等系统自带命令无法使用原因及解决方法
- RSA加密算法【手把手解释】
- 暴力破解(一)——python脚本暴力破解 加密的zip压缩文件
- 拦截器ConnectInterceptor
- python爬虫之bs4库_三分钟搞定bs4库的解析器
- 集合类型及其操作(复习)
- 一则故事表达:并发,并行,同步,异步,线程,多线程
- python【字符串】【转义符】【下标】【切片】【遍历】
- Progressive Scramble 复杂模拟
- 技巧|BurpSuite实现监听代理流量,隐匿身份