不知道看官们还记不记得上一节的内容，关于生命周期的。我们来个例子重温且练习一下。
传送门：http://www.cnblogs.com/galenyip/p/4574400.html
我们来实现一下时钟的功能，要求当秒是“0”的时候，字体变为红色。注意用componentWillUpdate实现。
如
当秒是0 变为
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>EzDigiClockComp</title>
6 <script src="lib/react.min.js"></script>
7 <script src="lib/JSXTransformer.js"></script>
8 <!--组件样式-->
9 <style>
10 @font-face {
11 font-family:"LED";
12 src:url("font/LED.eot?") format("eot"),
13 url("font/LED.woff") format("woff"),
14 url("font/LED.ttf") format("truetype"),
15 url("font/LED.svg#LED") format("svg");
16 font-weight:normal;
17 font-style:normal;
18 }
19 .ez-digi-clock{
20 font-family : LED;
21 font-size : 40px;
22 background : #70d355;
23 width: 300px;
24 height:60px;
25 line-height : 60px;
26 text-align : right;
27 padding : 10px;
28 letter-spacing : 5px;
29 }
30 </style>
31 </head>
32 <body>
33 <div id="content"></div>
34 <script type="text/jsx">
35 //获取并格式化当前时间
36 var _getTime = function(){
37 var _=[‘00‘,‘01‘,‘02‘,‘03‘,‘04‘,‘05‘,‘06‘,‘07‘,‘08‘,‘09‘], //补零
38 d = new Date(),
39 h = d.getHours(),
40 m = d.getMinutes(),
41 s = d.getSeconds();
42
43 return [_[h]||h,_[m]||m,_[s]||s].join(":");
44 };
45 //组件定义
46 var EzDigiClockComp = React.createClass({
47 //设置状态变量初始值
48 getInitialState : function(){
49 return {
50 time : _getTime(),
51 myStyle: {
52 color: "black"
53 }
54 };
55 },
56 //初次渲染后React执行此方法
57 componentDidMount : function(){
58 //设置定时器
59 this.timer = setInterval(function(){
60 this.setState({time:_getTime()});
61 }.bind(this),1000);
62 },
63 componentWillUpdate : function(m,n){
64 if(n.time.substring(n.time.length-1)==="0") n.myStyle = {color : "red" }
65 else n.myStyle = {color: "black"}
66 },
67 //即将从DOM树移除时执行此方法
68 componentWillUnmount : function(){
69 //删除定时器
70 clearInterval(this.timer);
71 },
72 render : function(){
73 return <div className="ez-digi-clock" style={this.state.myStyle}>
74 {this.state.time}
75 </div>;
76 }
77 });
78 //渲染
79 React.render(
80 <EzDigiClockComp />,
81 document.querySelector("#content"));
82
83 </script>
84 </body>
85 </html>
这里有个坑，不知道看官们踩到没。
即在componentWillUpdate中，如果我是用this.state.time去取值，而不是n.time去取，发现遇到了问题，实现不了效果，于是我加了console进去，发现this.state.time取到的还是之前的值。
即：
1 componentWillUpdate : function(m,n){
2 console.log(this.state.time)
3 if(this.state.time.substring(this.state.time.length-1)==="0") this.state.myStyle = {color : "red" }
4 else this.state.myStyle = {color: "black"}
5 console.log(this.state.time)
6 }
这点上面，我表示很疑惑哎，晚点去论坛上问问，如果看官们知道的话，帮我解解惑吧。。。。
那今天还是要学学新东西的。
访问DOM
我们在React中，还是需要去访问Virtual Dom的，因为我们这里已经没有了JQ，有时也不是访问实时的DOM节点，那在React中，我们怎么访问React元素的DOM对象呢？
答案是：ref属性和React.findDOMNode(component)
ref:对于我们要访问的DOM，那么我们就对那个DOM设置ref属性
如：
1 //JSX 2 <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()使用。
看官先自己思考下哈，然后看代码吧。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>EzComp</title>
6 <script src="lib/react.js"></script>
7 <script src="lib/JSXTransformer.js"></script>
8 <!--组件样式-->
9 <style>
10 .ez-weather{
11 background : black;
12 color:white;
13 padding:10px;
14 }
15 .ez-search{
16 display: flex;
17 flex-flow:row nowrap;
18 }
19 .ez-search input{
20 flex : 1 0 auto;
21 }
22 .ez-search button{
23 width:100px;
24 margin:0px 10px;
25 }
26 </style>
27 </head>
28 <body>
29 <div id="content"></div>
30 <script type = "text/jsx">
31 //定义组件
32 var EzWeatherComp = React.createClass({
33 //设置初始状态
34 getInitialState : function(){
35 return {waiting:false};
36 },
37 componentDidMount: function(){
38 React.findDOMNode(this.refs.q).focus()
39 },
40 render : function(){
41
42 return <div className="ez-weather">
43 <div className="ez-search">
44 <input type="text" defaultValue="beijing" ref="q"
45 placeholder="请输入城市拼音，如：beijing"/>
46 </div>
47 </div>;
48 }
49 });
50 //渲染
51 React.render(
52 <EzWeatherComp/>,
53 document.querySelector("#content"));
54
55 </script>
56 </body>
57 </html>
好吧，其实还是比较简单的。。。
既然上面用到了输入框这些表单，不知道看官注意到没，默认值我们是用的defaultValue，而不是value，这是React规定的 - -。。。
还有其他几个也提一下：
复选按钮：用defaultChecked而不是checked
1 //JSX 2 <input type="checkbox" defaultChecked="">
下拉选项：用defaultValue而不是selected
1 //JSX 2 <select defaultValue="A"> 3 <option value="A">China</option> 4 <option value="B">India</option> 5 <option value="C">Japan</option> 6 </select>
好了，本篇就这些。
今天刚入职新公司，心情复杂哎~