React.js再探（四）
不知道看官们还记不记得上一节的内容，关于生命周期的。我们来个例子重温且练习一下。
传送门：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>
好了，本篇就这些。
今天刚入职新公司，心情复杂哎~
