ReactJS学习笔记(一)
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')
);