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 ...
随机推荐
- Redis面试题及答案整理
1.什么是Redis?简述它的优缺点? Redis的全称是:Remote Dictionary.Server,本质上是一个Key-Value类型的内存数据库,很像memcached,整个数据库统统加载 ...
- 怎么用ABBYY重组PDF文档
ABBYY PDF Transformer+是一款可创建.编辑以及将PDF文件转换为其他可编辑格式的通用工具,除此之外,还可以使用ABBYY PDF Transformer+重新组织PDF文档,如在文 ...
- Python打包-Pyinstaller
我们知道,Python很优雅,很值得学习.但是Python是解释性语言,代码需要有Python解释器才能执行,相比较我们平时直接运行exe等可执行文件多了一步的麻烦. 于是,希望能将Python程序打 ...
- spring核心之AOP学习总结二
一:springAOP常用的注解 @Aspect:声明方面组件 @Before:声明前置通知 @After-returning:声明后置通知 @After:声明最终通知 @Around:声明环绕通知 ...
- Python多线程运行带多个参数的函数
在python中经常会到用多线程处理某个函数来缩短运行时间. from multiprocessing import Pool def work(x): return x+1 pool = Pool( ...
- python--内置函数---13
原创博文,转载请标明出处--周学伟 http://www.cnblogs.com/zxouxuewei/ Python 内置函数 内置函数 abs() divmod() input() ...
- WinForm创建自定义控件
虽然VS为我们提供了很多控件可以使用,但有时候这些控件仍然不能满足我们的要求,比如我们要对部分控件进行一些个性化的定制,例如美化控件,这时候就需要自己绘制控件,或是在原有控件的基础上进行修改 自定义控 ...
- Shiro集成Spring
本篇博客主要讲述的是两者的集成.不涉及到各自的详细细节和功能. 因为官方给出的文档不够具体,对新手而言通过官方文档还不可以非常快的搭建出SpringShiro的webproject.本博客将通过实际的 ...
- 产品半夜发现bug让程序员加班，程序员应如何回应？
群友半夜2点被产品叫起来改东西,然后他打车去公司加班,群友愤慨,特为此创作一个小段子 产品:XXX出bug了你赶紧看看 修复一下 开发:我宿舍没电脑 没网络啊 产品:你看看周围有没有网吧远程一下 或者 ...
- scala中Map和Tuple
/** * Created by root * Description : Tuple and Map */ object MapTest { def main(args: Array[String] ...