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 ...
随机推荐
- EF跨库查询，DataBaseFirst下的解决方案
出于各种原因,有时需要跨数据库访问某些数据表,有同学已经给出了解决方案,比如 http://blog.csdn.net/hanjun0612/article/details/50475800 已经解 ...
- python unittest 2
参考资料:http://pyunit.sourceforge.net/pyunit_cn.html :http://docs.python.org/2/library/unittest.html py ...
- BarTender出现条码打印位置不准的情况怎么办
在使用BarTender 2016设计打印条码标签,往往在打印时会遇到各种各样的问题,比如说:打印内容错位,内容发生偏移,与设置好的BarTender 2016条码标签的相对位置发生较为严重的偏差,这 ...
- Nginx 反向代理的正确配置
server { listen 80; server_name 127.0.0.1; #charset koi8-r; #access_log logs/host.access.log main; l ...
- 复习js
js写在页面最后如果放在前面,需要加window.onload=function(){)常见的两种输出方式 在网页中弹出显示框,显示信息 alert() 在控制台输出消息,一般用来调试程序consol ...
- Xcode工程添加第三方文件的详细分析 Create folder references for any added folders(转)
在开发iOS项目的时候需要导入第三方的库文件,但是通过Xcode导入第三方源文件的时候会提示一些信息,不知所以然. 现在看到的文档都是针对Xcode3的,针对Xcode4的说明很少,现在分享出来. 官 ...
- 九度 1557：和谐答案 (LIS 变形)
题目描述: 在初试即将开始的最后一段日子里,laxtc重点练习了英语阅读的第二部分,他发现了一个有意思的情况.这部分的试题最终的答案总是如下形式的:1.A;2.C;3.D;4.E;5.F.即共有六个空 ...
- Linux关闭Tomcat为什么要用Kill，而不是shutdown.sh
Linux关闭Tomcat为什么要用Kill,而不是shutdown.sh >>>>>>>>>>>>>>>&g ...
- RAC的搭建（三）--Grid的安装
1. 安装cvuqdisk.rpm补丁包 在两个Oracle RAC 所有节点上安装操作系统程序包cvuqdisk.如果没有cvuqdisk,集群验证实用程序就无法发现共享磁盘. 该包在p104045 ...
- PyQt4程序图标
程序图标就是一个小图片,通常显示在程序图标的左上角(ubuntu gnome在最上侧). #!/usr/bin/python # -*- coding:utf-8 -*- import sys fro ...