React学习笔记-5-初始化阶段介绍
- 初始化阶段可以使用的函数：
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学习笔记-5-初始化阶段介绍的更多相关文章
- React学习笔记-7-销毁阶段
销毁阶段可以使用的函数:componentWillUnmount:在删除组件之前进行清理操作,比如计时器和事件监听器.因为这些函数都是开发者手动加上去的,react不知道,必须进行手动清理. 实例第一 ...
- React学习笔记（一）- 入门笔记
React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...
- React学习笔记（六）事件处理
React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...
- React学习笔记（五）State&声明周期
React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...
- 【React】react学习笔记02-面向组件编程
react学习笔记02-面向组件编程 面向组件编程,直白来说,就是定义组件,使用组件. 以下内容则简单介绍下组建的声明与使用,直接复制demo观测结果即可. 步骤: 1.定义组件 a.轻量组件-函 ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- React学习笔记--程序调试
React学习笔记 二 程序调试 前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...
- React学习笔记（七）条件渲染
React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...
- React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- React学习笔记 - 元素渲染
React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...
随机推荐
- BZOJ 1876: [SDOI2009]SuperGCD
1876: [SDOI2009]SuperGCD Time Limit: 4 Sec Memory Limit: 64 MBSubmit: 3060 Solved: 1036[Submit][St ...
- maven项目project facets中是2.3调整为3.0的解决办法
以前情况下直接直接调整到3.0下面的按钮就会变成不可以点,当把前面的勾取掉就可以点击apply了,之后再次把勾勾上,点击apply有个弹窗默认是webcontent.在maven项目中改成src/ma ...
- eclipse报错“Undefined variable from import: ...”解决方案
环境 eclipse + pydev2.8.2 + python 3.5.1/python 2.7.11 + wxpython3.0 出现原因:原先默认解释器设置为python2,重装了pydev之后 ...
- PHP编码规范PSR-1
.note-content { font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeit ...
- 12月5日PHPCMS替换主页
cms替换主页的步骤 1.先做好静态页面: 2.在D:\wamp\www\phpcms\install_package\phpcms\templates文件夹下建新的文件夹tianqiwangluo( ...
- SQL记录
create table test( 教师号 integer , 星期一 integer null, 星期二 integer null, 星期三 integer null); insert into ...
- Yii2 基于RESTful架构的 advanced版API接口开发 配置、实现、测试 （转）
环境配置: 开启服务器伪静态 本处以apache为例,查看apache的conf目录下httpd.conf,找到下面的代码 LoadModule rewrite_module modules/mod_ ...
- 为什么margin-top不是作用于父元素【margin外边距合并问题】
coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中 ...
- 安装sitecore数据库和客户端到本机
(提前先装好数据库和IIS) 安装教程下载:http://download.csdn.net/detail/qq1162195421/6436799 安装过程省略... 1.安装好之后,会自动在安装路 ...
- 高程（4）：执行环境、作用域、上下文执行过程、垃圾收集、try...catch...
高程三 4.2.4.3 一.执行环境 1.全局执行环境是最外层的执行环境. 2.每个函数都有自己的执行环境,执行函数时,函数环境就会被推入一个当前环境栈中,执行完毕,栈将其环境弹出,把控制器返回给之前 ...