不知道看官们还记不记得上一节的内容，关于生命周期的。我们来个例子重温且练习一下。

传送门：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>

好了，本篇就这些。

今天刚入职新公司，心情复杂哎~

React.js再探（四）的更多相关文章

  1. React.js再探（二）

    上文中说到了组件了. 我们使用组件的目的最大莫过于复用,提供生产效率. 那么,这时候组件就应该能够提供一些”api”出来,让开发者去定义在不同场景下的不同表现,比如,行为或外观等. 而这些“api”就 ...

  2. React.js再探（三）

    很多时候,组件实例的外观和行为我们通过props进行定制就可以了.因为任何时候,组件实例的表现只跟 传过来的props属性 相关. 我们称这种为 无状态/ stateless 组件 即它自身是 无记忆 ...

  3. React.js终探（七）(完)

    我们在前面介绍了组件的各种特性,这一节我们来说说多组件的情况. 在实际开发中,我们的组件难免会遇到有公共部分的情况,如果是个别情况还好,但如果数量比较多的话,那这时候,就需要公用了. 怎么公用呢? R ...

  4. React.js终探（六）

    在React中,我们怎么样使用它跟CSS 3 动画结合在一起使用呢? CSS3 Transitoin CSS3动画要求DOM属性变化的时候才能够被触发.所以这就需要我们把属性变化后的React元素渲染 ...

  5. react.js 从零开始（四）React 属性和状态详解

    属性的含义和用法: 1.属性的含义. props=properties 属性:一个事物的性质和关系. 属性往往与生俱来,不可以修改. 2. 属性的用法. <Helloworld name=??? ...

  6. React.js终探（五）

    在React中,一切都是看做组件. 而组件的嵌套也是十分常见的. 所以有的组件就作为容器组件 容器组件 React元素可以包含子元素 如 //JSX <ezpanel title="t ...

  7. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  8. 第四节：SignalR灵魂所在Hub模型及再探聊天室样例

    一. 整体介绍 本节:开始介绍SignalR另外一种通讯模型Hub(中心模型,或者叫集线器模型),它是一种RPC模式,允许客户端和服务器端各自自定义方法并且相互调用,对开发者来说相当友好. 该节包括的 ...

  9. React.js 小书 Lesson25 - 实战分析：评论功能（四）

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson25 转载请注明出处,保留原文链接和作者信息. (本文未审核) 目前为止,第二阶段知识已经基本 ...

随机推荐

  1. 使用X264编码yuv格式的视频帧使用ffmpeg解码h264视频帧

    前面一篇博客介绍在centos上搭建点击打开链接ffmpeg及x264开发环境.以下就来问个样例: 1.利用x264库将YUV格式视频文件编码为h264格式视频文件 2.利用ffmpeh库将h264格 ...

  2. 在Apk应用程序内，查找某个Activity。

    转载请注明出处:http://blog.csdn.net/droyon/article/details/39933677 Intent intent = new Intent(Intent.ACTIO ...

  3. 【转】HLSL基础

    原文地址http://blog.csdn.net/chpdirect1984/article/details/1911622 目录 前言 1.HLSL入门 1.1什么是着色器 1.2什么是HLSL 1 ...

  4. SQLServer2008-2012资源及性能监控—CPU使用率监控具体解释

    前言: CPU是server中最重要的资源.在数据库server中,CPU的使用情况应该时刻监控以便SQLServer一直处于最佳状态. 本文将会使用可靠性和性能监视器来获取CPU相关的使用统计信息 ...

  5. 怎样用C#代码管理SharePoint解决方式

    怎样用C#代码管理SharePoint解决方式         本文我们将了解怎样用代码管理SharePoint解决方式.我们使用server端对象模型抽取解决方式.         SharePoi ...

  6. Win7 补丁装不上怎么办？

    检查系统盘文件系统是否出错: 打开管理员命令行程序(Win+R,输入 cmd 确认) 如果系统盘是 C 盘,命令行窗口输入 chkdsk C: /f 对提示输入’y’ 重启等待 系统文件检查: 打开管 ...

  7. REQIMPORT-购买内部应用程序（R12.2.3）

     採购内部申请(R12.2.3) --US Program:Requisition Import Short Name:REQIMPORT Application:Purchasing Execu ...

  8. 左右sqlplus一些方法用于汇总

    SQL> select * from v$version where rownum=1; BANNER --------------------------------------------- ...

  9. C和指针 （pointers on C）——第十一章：动态内存分配（下）习题

    1.编写calloc,内部用malloc. void *calloc (size_t n, size_t size) { char * memory; memory =(char*) malloc(n ...

  10. 数据结构（C达到）------- 双链表

    双链表中的每个节点包含两个指针域,指针域包含其后继节点的内存地址,还有一个指针所存储的存储器地址其领域前驱节点. 双向链表结点的类型描写叙述: //双向链表的类型描写叙述 typedef int El ...