react初始化阶段
- 初始化阶段可以使用的函数：
getDefaultProps:只调用一次，实例之间共享引用。只有在组件的第一个实例被初始化的时候，才会调用他，然后react会把这个函数的返回结果保存起来，从第二个实例开始，他们的默认属性都是这同一个结果。实例之间共享引用，在js中有两种类型的数据，一种值类型，比如字符串，布尔值等，一种是引用类型，比如数组，对象等，如果函数返回的是引用类型的数据，那么react会把引用保存起来，在创建不同的实例的时候，他会使用同一个引用当做属性，但是我们知道，引用指向的都是同一个地址，所以说不同实例之间操作的其实是同一个数据，所以在用这个函数的时候，要注意返回的是引用还是值。getInitialState:初始化每个实例特有的状态。从这个函数开始，每个实例被初始化的时候，都会调用他， 不像第一个函数只会调用一次，第一个函数处理的是属性，第二个函数处理的是状态，由于状态是每个实例自己内部的信息，每个实例要维护自己状态，所以不同的实例有不同的状态，那么都需要调用这个函数。
componentWillMount:render之前最后一次修改状态的机会。在这个时候，你还是可以修改状态的，但是在render里面就不可以在修改状态了。
render：只能访问this.props和this.state,只有一个顶层组件，不允许修改状态和dom输出。this.props和this.state是render特有的两个数据源，除此以外，你不应该在获取其他的数据信息。只有一个顶层组件？render的返回值只能是一个组件，这个组件可以包含很多的子组件，也可以包含很多的子代码，但是本质上他还是一个组件，你不能返回一个数组。不允许修改状态和dom输出。如果一定要修改，也是可以的，但是react不推荐这么做，如果你修改了状态和输出的话，那么render函数就无法再服务端进行使用，当然我们大部分时候是在客户端使用的render函数，如果你想提高网站的加载性能，就可以在服务端进行处理，但是你的render函数需要修改状态和dom输出，在服务端得时候是没有这样的环境的，所以你如果修改了状态和输出，就只能在浏览器使用了，这回大大的限制你的系统性能。第二个原因就是你如果在render里面修改了状态和输出，会导致代码的逻辑变得非常的复杂，很难经过状态分析出结果，react设计目的之一就是让组件的逻辑变得清晰简单，这样就违背了这样的目的。你自己还是别人就很难看懂这段代码。
componentDidMount:成功render并渲染完成真实dom之后触发，可以修改dom。这个函数被调用的时候，dom已经被创建。
- 实例：查看触发顺序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
<script type="text/jsx">
var style={
color:"red",
border:"1px solid #f99",
width:"200px",
height:"50px"
};
var HelloWorld=React.createClass({
getDefaultProps: function(){
console.log("getDefaultProps,1")
},
getInitialState: function(){
console.log("getInitialState,2");
return null;
},
componentWillMount: function(){
console.log("componentWillMount,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("componentDidMount,5");
},
});
React.render(<div style={style}>HelloWorld</div>,document.body)
</script>
</body>
</html>注意上面代码中红色的标记部分，我们只是输出的字符串HelloWorld，并不是标签<HelloWorld></Helloworld>，所以此时的控制台和输出是这样。
我们可以看出，getDefaultProps在实际的使用中，是直接调用的，也就是在React.createClass之后，就会被调用并把结果存储起来，及时你没有生成实例，这个函数也会被调用，react这么做主要目的就是为了提高性能，尽可能早的将我们要做的事情处理好，这样当我们要使用HelloWorld实例的时候，就会省掉调用这个函数的时间从而提高性能。我们改一下代码，让其正确输出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
<script type="text/jsx">
var style={
color:"red",
border:"1px solid #f99",
width:"200px",
height:"50px"
};
var HelloWorld=React.createClass({
getDefaultProps: function(){
console.log("getDefaultProps,1")
},
getInitialState: function(){
console.log("getInitialState,2");
return null;
},
componentWillMount: function(){
console.log("componentWillMount,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("componentDidMount,5");
},
});
React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body)
</script>
</body>
</html>
- 各个实例的正确用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
<script type="text/jsx">
$(document).ready(
function(){
var count=0;
var style={
color:"red",
border:"1px solid #090",
};
var HelloWorld=React.createClass({
getDefaultProps:function(){
console.log("getDefaultProps,1");
return{name:"Tom"};
},
getInitialState:function(){
console.log("getInitialState,2");
return{
myCount:count++,
ready:false
};
},
componentWillMount:function(){
console.log("componentWillMount,3");
this.setState({ready:true});
},
render:function(){
console.log("render,4");
return <p ref="childp">Hello,{
this.props.name ? this.props.name : "World"
}<br/>{""+this.state.ready}</p>;
},
componentDidMount:function(){
console.log("componentDidMount,5");
//这里才可以操作dom
$(React.findDOMNode(this)).append("surprise!");
},
//HelloWolrld内部
});
React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body)
//function 内部
}
//ready内部
)
</script>
</body>
</html> - 输出count，生成多个HelloWorld
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
<script type="text/jsx">
$(document).ready(
function(){
var count=0;
var style={
color:"red",
border:"1px solid #090",
};
var HelloWorld=React.createClass({
getDefaultProps:function(){
console.log("getDefaultProps,1");
return{name:"Tom"};
},
getInitialState:function(){
console.log("getInitialState,2");
return{
myCount:count++,
ready:false
};
},
componentWillMount:function(){
console.log("componentWillMount,3");
this.setState({ready:true});
},
render:function(){
console.log("render,4");
return <p ref="childp">Hello,{
this.props.name ? this.props.name : "World"
}<br/>{""+this.state.ready}{this.state.myCount}</p>;
},
componentDidMount:function(){
console.log("componentDidMount,5");
$(React.findDOMNode(this)).append("surprise!");
},
//HelloWolrld内部
});
React.render(<div style={style}><HelloWorld></HelloWorld><br/><HelloWorld></HelloWorld></div> ,document.body)
//function 内部
}
//ready内部
)
</script>
</body>
</html>
react初始化阶段的更多相关文章
- React组件生命周期-初始化阶段的函数执行顺序
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- junit源码解析--初始化阶段
OK,我们接着上篇整理.上篇博客中已经列出的junit的几个核心的类,这里我们开始整理junit完整的生命周期. JUnit 的完整生命周期分为 3 个阶段:初始化阶段.运行阶段和结果捕捉阶段. 这篇 ...
- 深入理解JVM-类加载初始化阶段-类的主动与被动引用
JVM的类加载阶段中初始化阶段 P210 虚拟机规定的五种情况必须对类的“初始化”情况 1.遇到new.getstatic.putstatic.或invokestic 四条字节码指令时,如果类没有经过 ...
- openresty开发系列32--openresty执行流程之1初始化阶段
openresty开发系列32--openresty执行流程之初始化阶段 一)初始化阶段 1)init_by_lua init_by_lua_block init_by_lua_file语 ...
- JVM 初始化阶段的重要意义分析
1.创建一个Mytest6类和Singleton类 public class MyTest6 { public static void main(String[] args) { Singleton ...
- 一起学习vue源码 - Vue2.x的生命周期(初始化阶段)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
- 你还不知道Vue的生命周期吗？带你从Vue源码了解Vue2.x的生命周期(初始化阶段)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
- SpringMVC初始化阶段流程源码分析
1.都知道SpringMVC项目启动的时候都会初始化一个类:DispatcherServlet,看这个类的源码我们可以发现他其实就是一个servlet, 为什么这么说呢?请看: DispatcherS ...
- React组件生命周期-正确执行初始化阶段的函数
一. 二.代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&quo ...
随机推荐
- SQL语句（十二）分组查询
(十二)分组查询 将数据表中的数据按某种条件分成组,按组显示统计信息 查询各班学生的最大年龄.最小年龄.平均年龄和人数 分组 SELECT <字段名表1> FROM <表名> ...
- HDU 4472 Count DP题
解题报告:题目大意,给你n个球,要将这n个球从下到上按层次排列,要求同一个层次的的每一个分支的数量都必须相等,问有多少种排列的方法. 此题的一个DP题,假设现在有n个球,要将这n个球排列好,我们就必须 ...
- 关于caffe的安装问题
在caffe的安装过程中,出现 /usr/bin/ld: cannot find -lcblas /usr/bin/ld: cannot find -latlas的问题 这时解决方案为http://s ...
- requests(一): 发送一个json格式的post请求
今天给一位同学解决post发送数据格式为json格式的请求,顺便确认一下问题归属. 背景: 用postman工具发送一个数据格式为json的请求,得到了服务器的响应. 用python的requests ...
- 一份最中肯的Java学习路线+资源分享（拒绝傻逼式分享）
这是一篇针对Java初学者,或者说在Java学习路线上出了一些问题(不知道该学什么.不知道整体的学习路线是什么样的) 第一步:Java基础(一个月左右) 推荐视频: 下面的是黑马内部视频,我比较推荐的 ...
- linux系统下安装nginx
1.第一步:获取nginx的安装包 wget http://nginx.org/download/nginx-1.7.8.tar.gz 2.解压安装包tar -xvf nginx-1.7.8.tar. ...
- java多线程计算和
如题:如何利用多线程实现1~1000000000的和 本文利用Callable可以返回值的特性,并将执行结果用CompletionService进行存储,最后将分步值累加. import java.u ...
- 抓包获取百度音乐API
这次抓包是获取手机APP中的数据包,共分为三个部分: 1.win7建立wifi 2.PC架设代理服务器 手机设置代理 3.抓包分析 一.win7建立wifi 在win7下搭建wifi非常简单,网上的教 ...
- TPCC-MySQL安装、使用及结果解读
tpcc-mysql用于MySQL基准测试,percona基于TPC-C(下面简写成TPCC)衍生出来的产品.下面对tpcc-mysql进行安装然后使用,最后结果解读,安装very easy,let ...
- eaccelerator 完全手册：配置、控制、API接口
安装官方有很详细的文档 转自 http://www.enjoyphp.com/2010/eaccelerator-manual/ 配置选项 eaccelerator.shm_size指定 eAccel ...