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

传送门：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. arch linux设备（请参考官方文档，桌面安装没有找到一个好工作后）

    首先,启动安装系统(一获得通过vmware虚拟机) 1.设置键盘布局 #loadkeys "us" #设置为美国的键盘布局.一般能够默认就可以 2.建立硬盘的分区 我採用的是fdi ...

  2. Maven使用-创建一个Web项目

    准备工作: 1,eclipse安装maven插件,本地下载maven工具 2,eclipse配置maven 创建项目步骤: 1,eclipse-创建项目-Maven Project 2,下一步, 3, ...

  3. Lua之Lua数据结构-TTLSA(6)（转） good

    一. tabletable是lua唯一的数据结构.table 是 lua 中最重要的数据类型. table 类似于 python 中的字典.table 只能通过构造式来创建.其他语言提供的其他数据结构 ...

  4. Metatable和Metamethod（转）

    Metatable和Metamethod是用来干啥的?它们可以使得表a和b的表达式“a + b”变得有意义,其中metatable使两个不相关的表a和b之间可以进行操作,而操作的具体行为比如说&quo ...

  5. Ubuntu在构建Robotframework+Selenium周围环境

    最近经历了从Windows进入系统Ubuntukylin下列.因此,测试工具也需要被重新安装,今天和共享安装过程. 我用的是环境:Ubuntu Kylin 14.04 64Bit系统. 启动权,首先, ...

  6. cocos2d-html5

    cocos2d-html5 简单的混乱 在正常情况下,build设置完毕后 跑ant编 变更后cocos2d.js 简单直观so easy 只需要上传cocos2d.js/game.js/index文 ...

  7. 七牛对用户使用webp图片格式的使用建议

    Qiniu 七牛问题解答 Chrome浏览器是可打开WebP格式的.可是并非全部的浏览器都支持webp格式,比如360.ie等浏览器是不支持的. WebP格式,谷歌(google)开发的一种旨在加快图 ...

  8. C利用宏语言（#，##，do…while(0)盛大）

    C利用宏语言(#,##.do-while(0)盛大) 1.使用宏预先定义__FILE__,__FUNCTION__.__LINE__. #include <stdio.h> void fu ...

  9. MVC下判断用户登录和授权状态方法

    MVC下判断用户登录和授权状态方法 在我们日常开发的绝大多数系统中,都涉及到管理用户的登录和授权问题.登录功能(Authentication),针对于所有用户都开放:而授权(Authorization ...

  10. 【Andrioid】在Gradle编译时生成一个不同的版本号，动态设置应用程序标题，应用程序图标，更换常数

    写项目的时候常常会遇到下面的情况: 1.须要生成測试版本号和正式版本号的apk 2.測试版本号和正式版本号的URL是不一样的 3.測试版本号和正式版本号的包名须要不一致,这样才干安装到同一部手机上面. ...