不知道看官们还记不记得上一节的内容，关于生命周期的。我们来个例子重温且练习一下。
传送门：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 //JSX2 <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 //JSX2 <input type="checkbox" defaultChecked="">
下拉选项：用defaultValue而不是selected
1 //JSX2 <select defaultValue="A">3 <option value="A">China</option>4 <option value="B">India</option>5 <option value="C">Japan</option>6 </select>
好了，本篇就这些。
今天刚入职新公司，心情复杂哎~
新闻热点
疑难解答
