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

传送门：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. Spring Boot 基础

    Spring Boot 基础 Spring Boot 项目(参考1) 提供了一个类似ASP.NET MVC的默认模板一样的标准样板,直接集成了一系列的组件并使用了默认的配置.使用Spring Boot ...

  2. MapReduce(十五): 从HDFS阅读本文的源代码分析

    以Map任务读取文本数据为例: 1)   LineRecordReader负责对文件切割的定位,以及对读取每一行内容的封装供用户Map任务使用.每次在定位在文件里不为0的位置时,多读取一行,由于前一个 ...

  3. ./startup.sh: Permission denied

    今天在Linux上部署项目,之前报过这个错误,通过下面方式攻克了.如今发出来备份一下: LINUX权限-bash: ./startup.sh: Permission denied 运行./startu ...

  4. String.format()【演示具体的例子来说明】

    String.format()[演示样例具体解释] 整理者:Vashon 前言: String.format 作为文本处理工具.为我们提供强大而丰富的字符串格式化功能,为了不止步于简单调用 Strin ...

  5. can&#39;t connect to mysql server on localhost &lt;10061&gt;

    需要启动MySQL服务.它可以通过两种方式来启动使用MySQL: 1.命令行模式. Win+R,进入cmd然后按Enter键.在命令行形式的输入: net start mysql56 mysql56是 ...

  6. mac eclipse svn subeclipse: Failed to load JavaHL Library.

    Failed to load JavaHL Library. These are the errors that were encountered: no libsvnjavahl-1 in java ...

  7. POJ 1745 Divisibility (线性dp)

    Divisibility Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 10598   Accepted: 3787 Des ...

  8. UVA 1291 Dance Dance Revolution(DP)

    意甲冠军:跳舞机有一个上5积分,分别central, top, bottom, left, right分,区区足站立还是需要1点物理,从一个单纯的脚central点上须要2点体力,从一个点上移动到相邻 ...

  9. LeetCode——ZigZag Conversion

    The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like ...

  10. Snail—ORACLE基础之事务学习(五)

    ---------------事务---当运行到commit时 事务才算是完毕,不然 会运行rollback操作. declare v_money acount.money%type:=1223; e ...