不知道看官们还记不记得上一节的内容，关于生命周期的。我们来个例子重温且练习一下。
传送门：http://www.cnblogs.com/galenyip/p/4574400.html
我们来实现一下时钟的功能，要求当秒是“0”的时候，字体变为红色。注意用componentWillUpdate实现。
如 当秒是0 变为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EzDigiClockComp</title>
<script src="lib/react.min.js"></script>
<script src="lib/JSXTransformer.js"></script>
<!--组件样式-->
<style>
@font-face {
font-family:"LED";
src:url("font/LED.eot?") format("eot"),
url("font/LED.woff") format("woff"),
url("font/LED.ttf") format("truetype"),
url("font/LED.svg#LED") format("svg");
font-weight:normal;
font-style:normal;
}
.ez-digi-clock{
font-family : LED;
font-size : 40px;
background : #70d355;
width: 300px;
height:60px;
line-height : 60px;
text-align : right;
padding : 10px;
letter-spacing : 5px;
}
</style>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
//获取并格式化当前时间
var _getTime = function(){
var _=['00','01','02','03','04','05','06','07','08','09'], //补零
d = new Date(),
h = d.getHours(),
m = d.getMinutes(),
s = d.getSeconds(); return [_[h]||h,_[m]||m,_[s]||s].join(":");
};
//组件定义
var EzDigiClockComp = React.createClass({
//设置状态变量初始值
getInitialState : function(){
return {
time : _getTime(),
myStyle: {
color: "black"
}
};
},
//初次渲染后React执行此方法
componentDidMount : function(){
//设置定时器
this.timer = setInterval(function(){
this.setState({time:_getTime()});
}.bind(this),1000);
},
componentWillUpdate : function(m,n){
if(n.time.substring(n.time.length-1)==="0") n.myStyle = {color : "red" }
else n.myStyle = {color: "black"}
},
//即将从DOM树移除时执行此方法
componentWillUnmount : function(){
//删除定时器
clearInterval(this.timer);
},
render : function(){
return <div className="ez-digi-clock" style={this.state.myStyle}>
{this.state.time}
</div>;
}
});
//渲染
React.render(
<EzDigiClockComp />,
document.querySelector("#content")); </script>
</body>
</html>
这里有个坑，不知道看官们踩到没。
即在componentWillUpdate中，如果我是用this.state.time去取值，而不是n.time去取，发现遇到了问题，实现不了效果，于是我加了console进去，发现this.state.time取到的还是之前的值。
即：
componentWillUpdate : function(m,n){
console.log(this.state.time)
if(this.state.time.substring(this.state.time.length-1)==="0") this.state.myStyle = {color : "red" }
else this.state.myStyle = {color: "black"}
console.log(this.state.time)
}
这点上面，我表示很疑惑哎，晚点去论坛上问问，如果看官们知道的话，帮我解解惑吧。。。。
那今天还是要学学新东西的。
访问DOM
我们在React中，还是需要去访问Virtual Dom的，因为我们这里已经没有了JQ，有时也不是访问实时的DOM节点，那在React中，我们怎么访问React元素的DOM对象呢？
答案是：ref属性和React.findDOMNode(component)
ref:对于我们要访问的DOM，那么我们就对那个DOM设置ref属性
如：
//JSX
<input type="text" defaultvalue="beijing" ref="q" placeholder="请输入城市拼音，如：beijing">
声明了ref属性的DOM，我们通过this.refs获取到组件对象，比如this.refs.q，我们就获取到了这个组件对象，记着这时还不是获取到DOM
React.findDOMNode(component):这个才是获取DOM的操作。参数component是获取到的组件对象，而我们上一步的this.refs.q就是获取到的组件对象。
对于已经渲染到DOM树中的React元素，findDOMNode()方法则获取到的对应的DOM节点对象。之后就可以用标准的DOM API去操作了。
那下面我们来实践一下，要的效果是让输入框自动获取焦点，结合上一节中的componentDidMount()使用。
看官先自己思考下哈，然后看代码吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EzComp</title>
<script src="lib/react.js"></script>
<script src="lib/JSXTransformer.js"></script>
<!--组件样式-->
<style>
.ez-weather{
background : black;
color:white;
padding:10px;
}
.ez-search{
display: flex;
flex-flow:row nowrap;
}
.ez-search input{
flex : 1 0 auto;
}
.ez-search button{
width:100px;
margin:0px 10px;
}
</style>
</head>
<body>
<div id="content"></div>
<script type = "text/jsx">
//定义组件
var EzWeatherComp = React.createClass({
//设置初始状态
getInitialState : function(){
return {waiting:false};
},
componentDidMount: function(){
React.findDOMNode(this.refs.q).focus()
},
render : function(){ return <div className="ez-weather">
<div className="ez-search">
<input type="text" defaultValue="beijing" ref="q"
placeholder="请输入城市拼音，如：beijing"/>
</div>
</div>;
}
});
//渲染
React.render(
<EzWeatherComp/>,
document.querySelector("#content")); </script>
</body>
</html>
好吧，其实还是比较简单的。。。
既然上面用到了输入框这些表单，不知道看官注意到没，默认值我们是用的defaultValue，而不是value，这是React规定的 - -。。。
还有其他几个也提一下：
复选按钮：用defaultChecked而不是checked
//JSX
<input type="checkbox" defaultChecked="">
下拉选项：用defaultValue而不是selected
//JSX
<select defaultValue="A">
<option value="A">China</option>
<option value="B">India</option>
<option value="C">Japan</option>
</select>
好了，本篇就这些。
今天刚入职新公司，心情复杂哎~