1.依赖的资源:
<script type="text/javascript" src='../asset/react.js'></script>
<script type="text/javascript" src='../asset/react-dom.js'></script>
<script type="text/javascript" src='../asset/JSXTransformer.js'></script> //解析text/jsx语法
<script type="text/javascript" src='../asset/browser.min.js'></script> //解析text/babel语法
2.基本写法:
html:<div id='demo1'></div>
JS:
ReactDOM.render(
<h1>Hello, I.m demo1!</h1>,
document.getElementById('demo1')
);
3.定义组件式写法createClass(!组件名称开头字母一定要大写)
html:<div id='demo2'></div>
JS:
var Demo2Box=React.createClass({
render:function(){
return(
<div className="demo2Box">
hello,I.m demo2
</div>
);
}
});
ReactDOM.render(
<Demo2Box />,
document.getElementById('demo2')
);
4.React.createElement使用,参数( ReactElement element, [object props], [children ...])
基本用法: React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello React!')
html:<div id='demo3'></div>
JS:
var Demo3Box=React.createClass({
render:function(){
return(
React.createElement('div',{className:'demo3Box'},
"hello,I.m demo3"
)
)
}
});
ReactDOM.render(
React.createElement(Demo3Box,null),
document.getElementById('demo3')
);
5.引用多个组件的写法:
html:<div id='demo4'></div>
JS:
var Demo4List=React.createClass({
render:function(){
return (
<div className="demo4List">
"hello,I.m demo4List"
</div>
);
}
});
var Demo4Form=React.createClass({
render:function(){
return (
<div className="demo4Form">
"hello,I.m demo4Form"
</div>
);
}
});
var Demo4Box=React.createClass({
render:function(){
return (
<div className="demo4Box">
<h1>demo4Box</h1>
<Demo4List />
<Demo4Form />
</div>
);
}
});
ReactDOM.render(
<Demo4Box />,
document.getElementById('demo4')
);
6.this.props[属性名]得到组件的属性。(用于获取外面传入的参数或者回调方法)
特例:this.props.children:表示组件的所有子节点(!没有子节点时就是undefined,如果有一个子节点,数据类型是Object,多个节点时,数据类型就是array。)
外部data,内部通过props遍历:
var data = [
{id: 1, author: "Pete Hunt", text: "This is one comment"},
{id: 2, author: "Jordan Walke", text: "This is *another* comment"}
];
var Demo5Box=React.createClass({
render:function(){
var commentNodes=this.props.data.map(function(comment) {
return (
<li author={comment.author} key={comment.id}>
{comment.text}
</li>
);
});
return(
<ul className="comment">
{commentNodes}
</ul>
)
}
});
ReactDOM.render(
<Demo5Box data={data} />,
document.getElementById('demo5')
);
使用props.children及React.Children:
7.this.state属性对象,可以改变。(比如用户输入、服务器请求、时间变化等)
getInitialState定义初始变量,这个对象可以通过this.state属性读取。
this.setState方法是修改状态值。
html:<div id='demo6'></div>
JS:
var Demo6Box=React.createClass({
getInitialState:function(){
return {liked:false}
},
handleClick:function(){
this.setState({liked:!this.state.liked});
},
render:function(){
var text=this.state.liked?'like':'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this,click to toggle.
</p>
)
}
});
ReactDOM.render(
<Demo6Box />,
document.getElementById('demo6')
);
8.组件的propTypes属性,用于验证传入的参数是否符合要求。
组件的 getDefaultProps方法,用来设置组件传入参数的默认值。
html:<div id='demo7'></div>
JS:
/*demo7*/
var title='title';
var bool=true;
var count=10;
var arr=[1,2,3];
var obj={'a':1};
var callback=function(){
console.log('dddddd');
};
var content="dsfsdffdd";
var Demo7Box=React.createClass({
propTypes:{
title:React.PropTypes.string.isRequired,
bool:React.PropTypes.bool.isRequired,
count:React.PropTypes.number.isRequired,
arr:React.PropTypes.array.isRequired,
obj:React.PropTypes.object,
callback:React.PropTypes.func.isRequired,
content:React.PropTypes.any.isRequired
},
getDefaultProps:function(){
return{
contentDefault:'sdsfsfdsaafdsfds'
}
},
render:function(){
return (
<div>
<h2>{this.props.title}</h2>
<h2>{this.props.bool}</h2>
<h2>{this.props.count}</h2>
<h2>{this.props.arr}</h2>
<h2>{this.props.obj.a}</h2>
<h2>{this.props.callback()}</h2>
<h2>{this.props.content}</h2>
<h2>{this.props.contentDefault}</h2>
</div>
)
}
});
ReactDOM.render(
<Demo7Box title={title} bool={bool} count={count} arr={arr} obj={obj} callback={callback} content={content} />,
document.getElementById('demo7')
);
9.this.refs:从组件中获取真实DOM的节点。
html:<div id='demo8'></div>
JS:
/*demo8*/
var Demo8Box=React.createClass({
handleClick:function(){
this.refs.myInput.focus();
},
render:function(){
return (
<div>
<input type='text' ref='myInput' />
<input type='button' value='getFocus' onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<Demo8Box />,
document.getElementById('demo8')
);
10.组件的生命周期的处理函数。
组件的生命周期分成三个状态: Mounting:已插入真实 DOM 、Updating:正在被重新渲染 、Unmounting:已移出真实 DOM。
React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外,React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用。
html:<div id='demo9'></div>
JS:
/*demo9*/
var Demo9Box=React.createClass({
getInitialState:function(){
return {
num:100
}
},
componentDidMount:function(){
var num=this.state.num;
this.timer=setInterval(function(){
if(num<=0){
this.setState({num:100})
}
else{
this.setState({num:num-1})
}
}.bind(this),1000)
},
render:function(){
return (
<div>
{this.state.num}
</div>
)
}
});
ReactDOM.render(
<Demo9Box />,
document.getElementById('demo9')
);
- ReactJS学习笔记(三)
需要注意的问题: 1.组件名称开头字母一定要大写.(PS:原因是 React 的 JSX 里约定分别使用首字母大.小写来区分本地组件的类和 HTML 标签.) 2.this.props.childre ...
- ReactJS学习笔记(二)
1.Ajax: componentDidMount 方法设置 Ajax 请求,等到请求成功,再用 this.setState 方法重新渲染 UI. /*demo1*/ var Demo1Box=Rea ...
- reactjs 学习笔记
1.安装 npm install -g create-react-app create-react-app my-app cd my-app npm start
- 【原】redux异步操作学习笔记
摘要: 发觉在学习react的生态链中,react+react-router+webpack+es6+fetch等等这些都基本搞懂的差不多了,可以应用到实战当中,唯独这个redux还不能,学习redu ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- The Road to learn React书籍学习笔记(第二章)
The Road to learn React书籍学习笔记(第二章) 组件的内部状态 组件的内部状态也称为局部状态,允许保存.修改和删除在组件内部的属性,使用ES6类组件可以在构造函数中初始化组件的状 ...
- React入门基础(学习笔记)
这篇博客是我通过阅读React官方文档的教程总结的学习笔记,翻译可能存在误差,如有疑问请参见http://reactjs.cn/react/docs/tutorial.html . 一.所需文件 在编 ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
随机推荐
- JavaScript分离代码理解
window.onload=prepareLinks; //页面加载触发onload事件 function prepareLinks(){ //定义函数 var links=document.getE ...
- IOS 制作启动画面
启动方式简述 IOS 8 及之前: Launch Images Source方式, IOS8 及之后: 1, Launch Images Source方式 : 2 , LaunchScreen. ...
- javascript——Array
# js数组分为属性和方法 ## 属性 1.constructor返回对创建此对象的数组函数的引用. 这个其实在javascript中的对象都有 var a = [] console.log(a.co ...
- CentOS中的常用命令
1. 网络 1.1 查看所有端口 netstat -ntlp 1.2 查看被打开的端口 netstat -anp 1.3 查看端口占用情况 lsof -i: 或 lsof -i tcp: 2. 硬盘 ...
- 修复sublime text系统右键菜单
修复sublime text系统右键菜单 安装完Sublime Text2后,拿掉电脑里面的备用硬盘,导致每次使用Open with Sublime Text2的时候,都会出错,打开注册表,找到 HK ...
- FLASH结构
mergedir/code.tmp.bin 压缩未加密文件的FLASH文件 mergedir/sfs/nvm.bin shareData数据文件,未加密.未压缩 数据克隆:DATA/ALL APP ...
- 重载Python FTP_TLS 实现Implicit FTP Over TLS方式下载文件
对于Python2.7来说,内置的FTP_TLS类并不支持Implicit FTP Over TLS加密方式的FTP Server操作,为支持Implicit FTP Over TLS加密方式,必须重 ...
- MyBatis与Spring整合
1.单独使用MyBatis 单独使用MyBatis,不结合其他框架,主要步骤是: 1.创建SqlSessionFactory对象 创建方法是通过SqlSessionFactoryBuilder这个类从 ...
- SQL Server的高级知识
DataSet的内容介绍,两种单例模式(并发量的考虑),SQL高级中的case语句.连接操作.子查询.派生表 -------------------------------- 1.Case的用法 使用 ...
- Tomcat Connector三种运行模式(BIO, NIO, APR)的比较和优化
Tomcat Connector的三种不同的运行模式性能相差很大,有人测试过的结果如下: 这三种模式的不同之处如下: BIO: 一个线程处理一个请求.缺点:并发量高时,线程数较多,浪费资源. Tomc ...