React 生命周期介绍
[组件生命周期]
一、理论
组件本质上是状态机，输入确定，输出一定确定
生命周期的三个阶段，三者时间是不固定的，只是在逻辑上的分类：
二、初始化阶段：
getDefaultProps:获取实例的默认属性(即使没有生成实例，组件的第一个实例被初始化CreateClass的时候调用，只调用一次,)
getInitialState:获取每个实例的初始化状态（每个实例自己维护）
componentWillMount：组件即将被装载、渲染到页面上（render之前最好一次修改状态的机会）
render:组件在这里生成虚拟的DOM节点（只能访问this.props和this.state；只有一个顶层组件，也就是说render返回值值职能是一个组件；不允许修改状态和DOM输出）
componentDidMount:组件真正在被装载之后，可以修改DOM
三、运行中状态：
componentWillReceiveProps:组件将要接收到属性的时候调用（赶在父组件修改真正发生之前,可以修改属性和状态）
shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回false，接收数据后不更新，阻止render调用，后面的函数不会被继续执行了）
componentWillUpdate:不能修改属性和状态
render:只能访问this.props和this.state；只有一个顶层组件，也就是说render返回值只能是一个组件；不允许修改状态和DOM输出
componentDidUpdate:可以修改DOM
四、销毁阶段：
componentWillUnmount:开发者需要来销毁（组件真正删除之前调用，比如计时器和事件监听器）
五、demo查看：
5.1 简单查看组件的初始化阶段的各个方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>daomul's example</title>
<link rel="stylesheet" href="../shared/css/base.css" />
</head>
<body>
<h1>Text demo</h1>
<div id="container"> </div> <script src="../shared/thirdparty/es5-shim.min.js"></script>
<script src="../shared/thirdparty/es5-sham.min.js"></script>
<script src="../shared/thirdparty/console-polyfill.js"></script>
<script src="../../build/react.js"></script>
<script src="../../build/JSXTransformer.js"></script>
<script type="text/jsx"> var style = {
color : "red",
border : "1px #000 solid",
}; var TextClass = React.createClass({
getDefaultProps:function(){
console.log("getDefaultProps,1");
},
getInitialState:function(){
console.log("getInitialState,2");
return null;
},
componentWillMount:function(){
console.log("componmentWillMount,3");
},
render:function(){
console.log("render,4");
return <p ref = "childp">Hello{(function (obj){
if (obj.props.name)
return obj.props.name
else
return "World"
})(this)} </p>;
},
componentDidMount:function(){
console.log("componmentDidMount,5");
},
}); React.render(<div style = {style}> <TextClass></TextClass> </div>,document.body); </script>
</body>
</html>
5.2 运行阶段的函数
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>daomul's example</title>
<link rel="stylesheet" href="../shared/css/base.css" />
</head>
<body>
<h1>Text demo</h1>
<div id="container"> </div> <script src="../shared/thirdparty/es5-shim.min.js"></script>
<script src="../shared/thirdparty/es5-sham.min.js"></script>
<script src="../shared/thirdparty/console-polyfill.js"></script>
<script src="../../build/react.js"></script>
<script src="../../build/JSXTransformer.js"></script>
<script type="text/jsx"> var style = {
color : "red",
border : "1px #000 solid",
}; var TextClass = React.createClass({
componentWillReceiveProps:function(newProps){
console.log("componentWillReciveProps,1");
console.log(newProps);
},
shouldComponentUpdate:function(){
console.log("shouldComponentUdate,2");return true;
},
componentWillUpdate:function(){
console.log("componentWillUpdate,3");
},
render:function(){
console.log("render,4");
return <p>hello:{this.props.name ? this.props.name : "world!"}</p>;
},
componentDidUpdate:function(){
console.log("componentDidUpadate,5");
},
});
var TextSourceClass = React.createClass({
getInitialState:function(){
return {name :''};
},
handleChange:function(event){
this.setState({name : event.target.value});
},
render:function(){
return <div>
<TextClass name = {this.state.name}></TextClass>
<br/><input type="text"onChange = {this.handleChange}/>
</div>;
},
}); React.render(<div style = {style}> <TextSourceClass></TextSourceClass> </div>,document.body); </script>
</body>
</html>
5.3 销毁阶段
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>daomul's example</title>
<link rel="stylesheet" href="../shared/css/base.css" />
</head>
<body>
<h1>Text demo</h1>
<div id="container"> </div> <script src="../shared/thirdparty/es5-shim.min.js"></script>
<script src="../shared/thirdparty/es5-sham.min.js"></script>
<script src="../shared/thirdparty/console-polyfill.js"></script>
<script src="../../build/react.js"></script>
<script src="../../build/JSXTransformer.js"></script>
<script type="text/jsx"> var style = {
color : "red",
border : "1px #000 solid",
}; var TextClass = React.createClass({ render:function(){
console.log("render,4");
return <p>hello:{this.props.name ? this.props.name : "world!"}</p>;
},
componentDidUpdate:function(){
console.log("componentDidUpadate,5");
},
});
var TextSourceClass = React.createClass({
getInitialState:function(){
return {name :''};
},
handleChange:function(event){
this.setState({name : event.target.value});
},
render:function(){
if(this.state.name == "1"){
return <div>123</div>;
}
return <div>
<TextClass name = {this.state.name}></TextClass>
<br/><input type="text"onChange = {this.handleChange}/>
</div>;
},
}); React.render(<div style = {style}> <TextSourceClass></TextSourceClass> </div>,document.body); </script>
</body>
</html>
React 生命周期介绍的更多相关文章
- React生命周期
在react生命周期中,分2段执行,一个挂载的生命周期,一个是组件发生了数据变动,或者事件触发而引发的更新生命周期. 注:react生命周期很重要,对于很多组件场景的应用发挥重要作用,而且不熟悉生命周 ...
- React 生命周期
前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...
- React生命周期详解
React生命周期图解: 一.旧版图解: 二.新版图解: 从图中,我们可以清楚知道React的生命周期分为三个部分: 实例化.存在期和销毁时. 旧版生命周期如果要开启async rendering, ...
- React生命周期简单详细理解
前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...
- 22.1 、react生命周期(一)
在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论 组件生命周期概述 1.初始化 在组件初始化阶段会执行 constructor static getDerivedStateF ...
- react 生命周期钩子里不要写逻辑，否则不生效
react 生命周期钩子里不要写逻辑,否则不生效,要把逻辑写在函数里,然后在钩子里调用函数,否则会出现问题.
- react复习总结（2）--react生命周期和组件通信
这是react项目复习总结第二讲, 第一讲:https://www.cnblogs.com/wuhairui/p/10367620.html 首先我们来学习下react的生命周期(钩子)函数. 什么是 ...
- React生命周期执行顺序详解
文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...
- vue生命周期和react生命周期对比
一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE ht ...
随机推荐
- 4种实现多列布局css
摘要: 多列布局在网站应用中也是经常见到的,今天就分享4中多列布局. display:table <style> .table { width: auto; min-width: 1000 ...
- 【scala】 scala 类 （五）
1.scala类 1.class 关键字 2.var 属性 默认生成getter/setter 方法 3.val 属性 默认生成getter 方法 4. 自定义getter /setter 方法 , ...
- Android 4.0以上BlurMaskFilter效果无效
Android MaskFilter的基本使用: MaskFilter类可以为Paint分配边缘效果. 对MaskFilter的扩展可以对一个Paint边缘的alpha通道应用转换.An ...
- iOS .tdb代替.dylib
原文链接:http://www.meniny.cn/2015/09/22/00-00-01-iOS_Xcode_7_tbd/ 不少升级 Xcode 7 的小伙伴们都表示在引入动态库时惊呆了,因为熟悉的 ...
- 【GIS】Cesium回到初始位置
var boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(116.4, 39.9, 100), 15 ...
- Lua协程-测试2
print("Lua 协程测试2") function testFun(n) print("into foo,n = "..n) * n) -- 挂起co协程 ...
- TCP三次握手原则
“已失效的连接请求报文段”的产生在这样一种情况下: client发出的第一个连接请求报文段并没有丢失,而是在某个网络结点长时间的滞留了,以致延误到连接释放以后的某个时间才到达server. 本来这是一 ...
- Android开发--ZZ:Android APK反编译详解（附图）
最近看了很多app的界面和交互非常棒,想学习下他们的源码,简单加压apk文件得到的资源文件和源码都不可读 它们都是编译后的文件,在网上搜索了下,发现这篇blog提到的工具都非常好用~ 文章原地址:ht ...
- N76E003之IAP
修改FLASH数据通常需要很长时间,不像RAM那样可以实时操作.而且擦除.编程或读取FLASH数据需要遵循相当复杂的时序步骤.N76E003提供方便FALSH编程方式,可以帮助用户通过IAP方式,重新 ...
- JavaScript Promise迷你书（中文版）
最近,发现了一个很不错的关于Promise介绍的迷你电子版书,分享给大家: http://liubin.org/promises-book/#chapter4-advanced-promise (篇幅 ...