010_React-组件的生命周期详解
ReactJS 的核心思想是组件化,即按功能封装成一个一个的组件,各个组件维护自己的状态和 UI,当状态发生变化时,会自定重新渲染整个组件,多个组件一起协作共同构成了 ReactJS 应用。
一、组件的生命周期
1,创建阶段
- 该阶段主要发生在创建组件类的时候,即调用 React.createClass 时触发。
- 这个阶段只会触发一个 getDefaultProps 方法,该方法返回一个对象并缓存起来。然后与父组件指定的 props 对象合并,最后赋值给 this.props 作为该组件的默认属性。
1,props 是一个对象,是组件用来接收外面传来的参数的。
2,组件内部是不允许修改自己的 props 属性,只能通过父组件来修改。上面的 getDefaultProps 方法便是处理 props 的默认值的。
2,实例化阶段
它是用来存储组件自身需要的数据。它是可以改变的,它的每次改变都会引发组件的更新。这也是 ReactJS 中的关键点之一。
即每次数据的更新都是通过修改 state 属性的值,然后 ReactJS 内部会监听 state 属性的变化,一旦发生变化,就会触发组件的 render 方法来更新 DOM 结构。
3,更新阶段
这主要发生在用户操作之后或者父组件有更新的时候,此时会根据用户的操作行为进行相应得页面结构的调整。这个阶段也会触发一系列的流程,按执行顺序如下:
4,销毁阶段
- 这个阶段只会触发一个叫 componentWillUnmount 的方法。
- 当组件需要从 DOM 中移除的时候,我们通常会做一些取消事件绑定、移除虚拟 DOM 中对应的组件数据结构、销毁一些无效的定时器等工作。这些事情都可以在这个方法中处理。
二、完整的样例
下面通过一个简单的欢迎信息组件,来演示组件各个环节的运作流程。同时这里把组件整个生命周期中所有会触发的方法都列出来了。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>hangge</title>
<script type="text/javascript" src="./node_modules/react/dist/react.js"></script>
<script type="text/javascript" src="./node_modules/react-dom/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script type="text/babel">
var Welcome = React.createClass({
/* 1.创建阶段 */
//在创建类的时候被调用
getDefaultProps: function() {
console.log("getDefaultProps");
return {};
}, /* 2.实例化阶段 */
//获取this.state的默认值
getInitialState: function() {
console.log("getInitialState");
return {name: "hangge.com"};
},
//组件将要加载,在render之前调用此方法
componentWillMount: function() {
//业务逻辑的处理都应该放在这里,比如对state的操作等
console.log("componentWillMount");
},
//渲染并返回一个虚拟DOM
render: function() {
console.log("render");
return (
<div>欢迎访问: {this.state.name}</div>
);
},
//组件完成加载,在render之后调用此方法
componentDidMount: function() {
//在该方法中,ReactJS会使用render方法返回的虚拟DOM对象来创建真实的DOM结构
console.log("componentDidMount");
var node = ReactDOM.findDOMNode(this);
console.log(node);
}, /* 3.更新阶段 */
//该方法发生在this.props被修改或父组件调用setProps()方法之后
componentWillReceiveProps: function() {
console.log("componentWillRecieveProps");
},
//是否需要更新
shouldComponentUpdate: function() {
console.log("shouldComponentUpdate");
return true;
},
//将要更新
componentWillUpdate: function() {
console.log("componentWillUpdate");
},
//更新完毕
componentDidUpdate: function() {
console.log("componentDidUpdate");
}, /* 4.销毁阶段 */
//销毁时会被调用
componentWillUnmount: function() {
console.log("componentWillUnmount");
},
});
ReactDOM.render(<Welcome />, document.getElementById('example'));
</script>
</head>
<body>
<div id="example"></div>
</body>
</html>
Reference:http://www.hangge.com/blog/cache/detail_1473.html
010_React-组件的生命周期详解的更多相关文章
- vue组件的生命周期详解
1.生命周期&生命周期函数 生命周期:指一个组件从创建->运行->销毁的整个阶段,强调的是一个时间段. 生命周期函数:由vue框架提供的内置函数,会伴随着组件的生命周期,自动按序执 ...
- React—组件生命周期详解
React—组件生命周期详解 转自 明明的博客 http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...
- ASP.NET生命周期详解
最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多处理流程,如管道事件等 ...
- ASP.NET生命周期详解 [转]
最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多处理流程,如管道事件等 ...
- ASP.NET生命周期详解(转)
看到好文章需要分享. 最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多 ...
- ASP.NT运行原理和页面生命周期详解及其应用
ASP.NT运行原理和页面生命周期详解及其应用 1. 下面是我画的一张关于asp.net运行原理和页面生命周期的一张详解图.如果你对具体不太了解,请参照博客园其他帖子.在这里我主要讲解它的实际应用. ...
- vue组件生命周期详解
Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...
- Android四大组件之---activity生命周期详解
废话不多说, 先来一张Google提供的一张经典的生命周期流程图: 有的朋友可能看英文的有点费劲,再提供一张中文版的 O(∩_∩)O 相信已经很多人对这张图再熟悉不过了,下面笔者按照自己的理解并结合 ...
- 【转】Java 类的生命周期详解
一. 引 言 最近有位细心的朋友在阅读笔者的文章时,对java类的生命周期问题有一些疑惑,笔者打开百度搜了一下相关的问题,看到网上的资料很少有把这个问题讲明白的,主要是因为目前国内java方面的教材大 ...
随机推荐
- vue过滤器用法实例分析
过滤器: vue提供过滤器: capitalize uppercase currency.... ? 1 2 3 <div id="box"> {{msg|cu ...
- Html中的img标签 加载失败
在Http请求时,有时会遇到img图片标签加载失败,不显示的情况: 解决方法,在重新给src属性赋值时,先将onerror事件清除掉,再赋值,这样就不会存在循环调用问题了,代码如下; <img ...
- 6个小而美的es6新特性
译者:动静若参商 译文:http://www.zcfy.cc/article/1795 原文:https://davidwalsh.name/es6-features JavaScript社区中的每个 ...
- chrome 开发者工具,查看元素 hover 样式
在web开发中,浏览器开发者工具是我们常用的调试工具.我们经常会有这样的需求,就是查看元素的时候需要查看它的hover样式.相信有很多小伙伴都遇到过这样的情形,始终选不中hover后的元素状态.其实在 ...
- 我写的Angular相关的文章
此文正在更新中... Angular6的变化 Angular7的变化 No value accessor for form control with path的解决方案
- Android Studio手动打包
项目写完了,现在需要把应用上传到市场上面,那么怎么把项目打包成apk?(Android的可安装文件). 1. 创建签名文件 2. 填写好签名参数 3. 生成APK 注意:签名的密码和密匙的密码注意保管 ...
- git 入门教程之里程碑式标签
"春风得意马蹄疾,一日看尽长安花",对于项目也是如此,最值得期待的恐怕就要数新版本发布的时刻了吧?每当发布新版本时要么是版本号命名(比如v0.0.1)或者代号命名(比如Chelse ...
- (后端)sql手工注入语句&SQL手工注入大全(转)
转自脚本之家: 看看下面的1.判断是否有注入;and 1=1;and 1=2 2.初步判断是否是mssql;and user>0 3.判断数据库系统;and (select count(*) f ...
- DataGridView的单元格如何嵌入多个按钮控件
前段时间我有一个朋友面试公司的时候遇到这个面试题,他也给了份原题给我瞧瞧,并没有什么特别的要点,关于这一类问题,如何在网格上的单元格嵌入多个控件(如按钮.超链接等)问题,我在网上搜索了下这类问题,发现 ...
- 虚拟机-linux系统中图形界面和命令行界面切换
linux系统中图形化界面和命令行界面之间的切换可以分为两种,临时性切换和永久性切换. 临时性切换即切换后只对本次生效,系统重启后界面还是默认界面. 永久性切换即切换后系统开机后永远处于的界面. 临时 ...