React组件生命周期详解


Posted in Javascript onJuly 03, 2017

React组件生命周期详解

调用流程可以参看上图。

React组件提供了生命周期的钩子函数去响应组件不同时刻的状态,组件的生命周期如下:

  1. 实例化
  2. 存在期
  3. 销毁期

实例化

首次调用组件时,有以下方法会被调用(注意顺序,从上到下先后执行):

getDefaultProps

这个方法是用来设置组件默认的props,组件生命周期只会调用一次。但是只适合react.createClass直接创建的组件,使用ES6/ES7创建的这个方法不可使用,ES6/ES7可以使用下面方式:

//es7
class Component {
 static defaultProps = {}
}
//或者也可以在外面定义es6
//Compnent.defaultProps

getInitialState

设置state初始值,在这个方法中你已经可以访问到this.props。getDefaultProps只适合React.createClass使用。使用ES6初始化state方法如下:

class Component extends React.Component{
 constructor(){
 this.state = {
  render: true,
 }
 }

componentWillMount

改方法会在组件首次渲染之前调用,这个是在render方法调用前可修改state的最后一次机会。这个方法很少用到。

render

这个方法以后大家都应该会很熟悉,JSX通过这里,解析成对应的虚拟DOM,渲染成最终效果。格式大致如下:

class Component extends React.Component{
 render(){
 return (
  <div></div>
 )
 }

componentDidMount

这个方法在首次真实的DOM渲染后调用(仅此一次)当我们需要访问真实的DOM时,这个方法就经常用到。如何访问真实的DOM这里就不想说了。当我们需要请求外部接口数据,一般都在这里处理。

存在期

实例化后,当props或者state发生变化时,下面方法依次被调用:

componentWillReceiveProps

每当我们通过父组件更新子组件props时(这个也是唯一途径),这个方法就会被调用。

componentWillReceiveProps(nextProps){}

shouldComponentUpdate

字面意思,是否应该更新组件,默认返回true。当返回false时,后期函数就不会调用,组件不会在次渲染。

shouldComponentUpdate(nextProps,nextState){}

componentWillUpdate

字面意思组件将会更新,props和state改变后必调用。

render

跟实例化时的render一样,不多说

componentDidUpdate

这个方法在更新真实的DOM成功后调用,当我们需要访问真实的DOM时,这个方法就也经常用到。

销毁期

销毁阶段,只有一个函数被调用:

componentWillUnmount

每当组件使用完成,这个组件就必须从DOM中销毁,此时该方法就会被调用。当我们在组件中使用了setInterval,那我们就需要在这个方法中调用clearTimeout。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery单选框radio绑定click事件实现方法
Jan 14 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
js实现3d悬浮效果
Feb 16 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
Node.js系列之发起get/post请求(2)
Aug 30 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 Javascript
Swiper实现导航栏滚动效果
Oct 16 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 #Javascript
Swiper实现轮播图效果
Jul 03 #Javascript
jQuery实现点击关注和取消功能
Jul 03 #jQuery
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 #Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 #Javascript
Bootstrap按钮组实例详解
Jul 03 #Javascript
详解使用vue实现tab 切换操作
Jul 03 #Javascript
You might like
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
python实现简单爬虫功能的示例
2016/10/24 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
Python基础之文件读取的讲解
2019/02/16 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
Django 请求Request的具体使用方法
2019/11/11 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
python os模块在系统管理中的应用
2020/06/22 Python
四种会话跟踪技术
2015/05/20 面试题
解除合同协议书
2014/04/17 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript
Go语言空白表示符_的实例用法
2021/07/04 Golang
Python pyecharts绘制条形图详解
2022/04/02 Python
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js