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 ...
随机推荐
- 6. go数组与冒泡排序
include 数组的概念 如何定义数组 数组常用的用法 数组如何指定下标设值 二维数组 冒泡排序 数组 定义数组的格式:var [n] , n>=0 数组长度也是类型的一部分,因此具有不同的长 ...
- GitHub 二次验证收不到短信咋办？
身在天朝,用了国外的代码托管服务,会有些烦恼的. 网速慢就不说了,如果启用了二次验证,短信收不到那就悲催了. 之前的都能收到短信的,突然间尝试了很多天都不行,联系github的客服,几次的答复如下: ...
- java okhhtp下载学信网学籍信息
学信网的登录有验证码,是那种计算数字或者汉字识别的,很难识别.最近连学籍信息和学历信息也换成图片了,常规的正则 css xpath都不能使. 下载图片,需要先登录,获取登陆后的cookie和学籍信息的 ...
- 【java】 java SPI
SPI(Service provider interface)是旨在由第三方实现或扩展的API.它可以用于启用框架扩展和可替换组件. 服务是一组众所周知的接口或(通常是抽象的)类.服务提供者是服务的特 ...
- MySQL Study之--MySQL普通用户无法本地登陆
MySQL Study之--MySQL普通用户无法本地登陆 在安装完毕MySQL后,我们通常加入拥有对应权限的普通用户用来訪问数据库.在使用用户本地登录数据库的时候,常常会出现怎么登录也无 ...
- Java用三元运算符判断奇数和偶数
创建一个类,在该类的主方法中创建标准输入流的扫描器对象,提示用户输入一个整数,并通过扫描器的方法来接受这个整数,然后通过三元运算符判断该数字与2的余数,如果余数为0,说明其是偶数,否则是奇数. imp ...
- Images.xcassets 的简单使用
总结起来Images.xcassets 就这么几句话 (1)以下開始简单整理 进入images.xcassets 右键--->New Image Set 或者点XCode的images.xcas ...
- NetBpm 配置篇（2）
转载注明出处:http://www.cnblogs.com/anbylau2130/p/3877353.html 上一篇中介绍了Netbpm在IIS和CassiniWebServer服务器的安装 通过 ...
- ios开发周期之--（向上，向下，四舍五入）取整
ceil(x)返回不小于x的最小整数值(然后转换为double型). floor(x)返回不大于x的最大整数值. round(x)返回x的四舍五入整数值.
- 转载用sql语句计算出mysql数据库的qps,tps,iops性能指标
本帖最后由 LUK 于 2014-9-21 22:39 编辑 思路: 1 关注MYSQL三个方面的性能指标,分别为query数,transaction数,io请求数 2 在某个时间范围内(例如20秒) ...