标签：
阅读前请看这里：
* 了解js及jQuery的使用
* 对react有一定的了解，知道jsx的语法
* 这里只讲述如何使用react，并不介绍react的优缺点如果不满足这些，建议先了解下，然后再看这篇文章
下面会讲述5个react的实例，虽然仅有5个，但在常用的开发中，几乎会包含大部分的情况，只要熟练掌握这5个demo，相信一定会解决大部分问题。
demo中，所有样例会打包后，传递到附件，大家可以下载阅览，最好自己亲手实践下，不要直接copy代码，没有意义。
使用的react版本是0.14.7
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1><span class="label label-info">DEMO 1</span></h1>
<br><br><br>
<div class="well" id="well">
</div>
<script src="js/jquery.min.js"></script>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<script type="text/babel">
var Text = React.createClass({
render: function() {
return (
<div className="a">
大家好，我是用react渲染出来的！
</div>
);
}
});
ReactDOM.render(
<Text/>,
document.getElementById(‘well‘)
);
</script>
</body>
</html>
<div id=‘well‘>这里的内容是使用react渲染出来的，代码中这里是空的，依赖下面的js进行渲染vat Text = 这块，这里是声明一个模块，名字随意起，我们把第一个字母大写，用来区分html中原生的标签React.createClass({
render: function() {
return (
<div className="a">
大家好，我是用react渲染出来的！
</div>
);
}
});这块是创建一个模块，使用React.createClass即可创建。
* 其中参数有很多，但都可以省略，唯有render不可以省略，因为这是用来表述这个插件被加载后，显示的是什么样子，它的返回结果，就是加载在页面上最终的样式。
ReactDOM.render(
<Text/>,
document.getElementById(‘well‘)
);这段代码是用来渲染react组件额，第一个参数是组件，第二个参数是要渲染的位置。
* 使用<Text/>的 方式就可以实例化组件，或者写成<Text></Text>，要注意下，react中标签的闭合非常严格，任何标签的关闭与打开必须一一对应，否则会报错。
* 到目前为止，就完成了一次渲染，将Text组件render函数返回的内容，填充到了id=well的div中。
往往在使用中，文本的内容并不是写死的，而是需要被我们指定，这样组件才能更通用。下面介绍下，如何向react中传递参数。
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1><span class="label label-info">DEMO 2</span></h1>
<br><br><br>
<div class="well" id="well">
</div>
<script src="js/jquery.min.js"></script>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<script type="text/babel">
var Text = React.createClass({
render: function() {
return (
<div className="a">
大家好，我是用{this.props.name}渲染出来的！age={this.props.age}
</div>
);
}
});
ReactDOM.render(
<Text name="react" age={181}></Text>,
document.getElementById(‘well‘)
);
</script>
</body>
</html>
name="react"另一种是age={181}，这两种写法是有区别的，并不仅仅因为一个是str，一个是int。如果是str这种类型，写成 name="xxx"或者name={"xxx"}都是可以的，加了{}的意思就是js中的变量，更加精确了。而后者age={181}是不可以去掉{}的，这样会引起异常，所以这里要注意下，并且建议任何类型都加上{}来确保统一。getDefaultProps中定义默认的props值，即使在没有传递参数的情况下，也能取到默认值。state算是react的核心了，任何页面的变化，刷新都是state的变化引起。在react中，只要调用了setState都会引起render的重新执行。下面介绍下如何通过键盘事件触发状态变化。
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1><span class="label label-info">DEMO 3</span></h1>
<br><br><br>
<div class="well" id="well">
</div>
<script src="js/jquery.min.js"></script>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<script type="text/babel">
var Text = React.createClass({
getInitialState: function() {
return {name: "react"};
},
keyUp: function(e){
this.setState({name: e.target.value});
console.log(this.state.name);
},
render: function() {
return (
<div className="a">
大家好，我是用{this.state.name}渲染出来的！
<input onKeyUp={this.keyUp} />
</div>
);
}
});
ReactDOM.render(
<Text></Text>,
document.getElementById(‘well‘)
);
</script>
</body>
</html>
getInitialState和keyUp，其中getInitialState是react中的初始化状态的函数，类似上一节中getDefaultProps的作用。keyUp是我自定义的函数，用来响应键盘事件的。this.setState({name: e.target.value}, function(){
console.log(this.state.name);
})上一节讲到状态变化触发render的重新渲染，这里将常用的网络请求引入，结合到状态变化中。
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.div {
height: 100px;
}
</style>
</head>
<body>
<h1><span class="label label-info">DEMO 4</span></h1>
<br><br><br>
<div class="well div" id="well">
</div>
<script src="js/jquery.min.js"></script>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<script type="text/babel">
var Text = React.createClass({
getInitialState: function() {
return {cur_time: 0};
},
request: function() {
$.ajax({
type: "GET",
url: "http://xxx",
success: function(data){
this.setState({cur_time: data.timestamp});
}.bind(this),
complete: function(){
this.setState({cur_time: Date.parse(new Date()) / 1000});
}.bind(this)
});
},
componentDidMount: function(){
setInterval(this.request, 1000);
},
render: function() {
return (
<div className="col-xs-12">
当前时间{this.state.cur_time}
<div className={ this.state.cur_time % 2 == 0?"hidden": "col-xs-6 alert alert-success"}>
<span>最后一位奇数</span>
</div>
<div className={ this.state.cur_time % 2 != 0?"hidden": "col-xs-6 alert alert-danger"}>
<span>最后一位偶数</span>
</div>
</div>
);
}
});
ReactDOM.render(
<Text></Text>,
document.getElementById(‘well‘)
);
</script>
</body>
</html>
request和componentDidMount，其中request是请求网络的函数，componentDidMount是react内部的函数，也是react生命周期的一部分，它会在render第一次渲染前执行，而且只会执行一次。componentDidMount函数，这个函数在render渲染前会执行，里面的代码也很简单，增加了一个定时器，1秒钟执行一次request。在封装react时，我们往往按照最小单位封装，例如封装一个通用的div，一个通用的span，或者一个通用的table等，所以各自组件对应的方法都会随着组件封装起来，例如div有自己的方法可以更改背景色，span可以有自己的方法更改字体大小，或者table有自己的方法来更新table的内容等~ 这里我们用一个div相互嵌套的例子来查看父子组件如何相互嵌套及调用各自的方法。在下面的例子中，父组件与子组件都有一个方法，来改变自身的背景色，我们实现父子组件相互调用对方的方法，来改变对方的背景色。
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.child {
border-color: black;
border: 1px solid;
height: 200px;
}
.parent {
height: 400px;
border: 3px solid;
}
</style>
</head>
<body>
<h1><span class="label label-info">DEMO 5</span></h1>
<br><br><br>
<div id="well">
</div>
<script src="js/jquery.min.js"></script>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<script type="text/babel">
var Child = React.createClass({
getInitialState: function() {
return {color: ""};
},
changeColor: function(e) {
this.setState({color: e.target.getAttribute("data-color")});
},
render: function() {
return (
<div style={{backgroundColor: this.state.color}} className="col-xs-5 col-xs-offset-1 child">
<br/>
<ul className="list-inline">
<li><a href="#" data-color="#286090" className="btn btn-primary" onClick={this.props.parentChangeColor}> </a></li>
<li><a href="#" data-color="#31b0d5" className="btn btn-info" onClick={this.props.parentChangeColor}> </a></li>
<li><a href="#" data-color="#c9302c" className="btn btn-danger" onClick={this.props.parentChangeColor}> </a></li>
<li><a href="#" data-color="#ec971f" className="btn btn-warning" onClick={this.props.parentChangeColor}> </a></li>
<li><a href="#" data-color="#e6e6e6" className="btn btn-default" onClick={this.props.parentChangeColor}> </a></li>
</ul>
</div>
);
}
});
var Parent = React.createClass({
getInitialState: function() {
return {color: ""};
},
changeColor: function(e) {
this.setState({color: e.target.getAttribute("data-color")});
},
child1ChangeColor: function(e) {
this.refs["child1"].changeColor(e);
},
child2ChangeColor: function(e) {
this.refs["child2"].changeColor(e);
},
render: function() {
return (
<div style={{backgroundColor: this.state.color}} className="col-xs-10 col-xs-offset-1 parent">
<br/>
<ul className="list-inline">
<li>对应第一个child</li>
<li><a href="#" data-color="#286090" className="btn btn-primary" onClick={this.child1ChangeColor}> </a></li>
<li><a href="#" data-color="#31b0d5" className="btn btn-info" onClick={this.child1ChangeColor}> </a></li>
<li><a href="#" data-color="#c9302c" className="btn btn-danger" onClick={this.child1ChangeColor}> </a></li>
<li><a href="#" data-color="#ec971f" className="btn btn-warning" onClick={this.child1ChangeColor}> </a></li>
<li><a href="#" data-color="#e6e6e6" className="btn btn-default" onClick={this.child1ChangeColor}> </a></li>
</ul>
<ul className="list-inline">
<li>对应第二个child</li>
<li><a href="#" data-color="#286090" className="btn btn-primary" onClick={this.child2ChangeColor}> </a></li>
<li><a href="#" data-color="#31b0d5" className="btn btn-info" onClick={this.child2ChangeColor}> </a></li>
<li><a href="#" data-color="#c9302c" className="btn btn-danger" onClick={this.child2ChangeColor}> </a></li>
<li><a href="#" data-color="#ec971f" className="btn btn-warning" onClick={this.child2ChangeColor}> </a></li>
<li><a href="#" data-color="#e6e6e6" className="btn btn-default" onClick={this.child2ChangeColor}> </a></li>
</ul>
<hr/>
<Child ref="child1" parentChangeColor={this.changeColor} />
<Child ref="child2" parentChangeColor={this.changeColor} />
</div>
);
}
});
ReactDOM.render(
<Parent/>,
document.getElementById(‘well‘)
);
</script>
</body>
</html>
child1ChangeColor中就有this.refs["child1"].changeColor(e);的使用。连起来说下逻辑，在点击父组件中第一列中的按钮后，触发onClick事件，然后onClick事件后，传递到child1ChangeColor后，将事件传递进入，然后再次传递给子组件的changeColor中，因为子组件的changeColor是更改子组件自身的state，所以这时候子组件再次渲染，于是改变了颜色。这就是父组件调用子组件的逻辑。附件地址在github上~
标签：
原文地址：http://blog.csdn.net/iambinger/article/details/51803606
