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方面的教材大 ...
随机推荐
- Java基础-一文搞懂位运算
在日常的Java开发中,位运算使用的不多,使用的更多的是算数运算(+.-.*./.%).关系运算(<.>.<=.>=.==.!=)和逻辑运算(&&.||.!), ...
- css 如何让背景图片拉伸填充避免重复显示
如何让背景图片拉伸填充,这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在css2.1之前是不能被修改 ...
- angular 去掉url里面的#
1.适合客户端的方法,但是页面不能刷新,一刷新就404 (1)在index.html里添加 <base href="/"> (2)在app.js的config里,注入$ ...
- Linux上Simplescalar/ARM的安装和运行文档
本文是基于ARM的simplescalar在ubuntu下的安装说明 1.1 软件下载 *********************文件下载地址:http://yunpan.cn/cw2n7dAyfG ...
- RabbitMQ 消息流程、AMOP 概念
AMOP Server:Broker.RabbitMQ Server,实现 AMOP 实体服务,接受客户端的连接 Conneciton:链接,应用程序与 Server 的网络连接 Channel:网络 ...
- 快速排序的java实现
快速排序也属于“交换”类的排序. 核心思想可以概括为:通过多次划分操作实现排序.每一趟选择当前所有子序列中的一个关键字(通常是第一个)作为枢轴,将小于它的元素统统放到它的前面,大于它的统统放到它的后面 ...
- JMeter 线程组之Stepping Thread Group插件介绍
线程组之Stepping Thread Group插件介绍 by:授客 QQ:1033553122 测试环境 apache-jmeter-2.13 插件: https://jmeter-plu ...
- HDU 1162 Eddy's picture (最小生成树)(java版)
Eddy's picture 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1162 ——每天在线,欢迎留言谈论. 题目大意: 给你N个点,求把这N个点 ...
- spring静态代理和动态代理
本节要点: Java静态代理 Jdk动态代理 1 面向对象设计思想遇到的问题 在传统OOP编程里以对象为核心,并通过对象之间的协作来形成一个完整的软件功能,由于对象可以继承,因此我们可以把具有相同功能 ...
- ERROR 1050 (42S01): Table xxx already exists
今天遇到一个关于MySQL求助的问题,修改表结构时遇到"ERROR 1050 (42S01): table xxx already exits" mysql> ALTER ...