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

传送门：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. HDU 2845 Beans (动态调节)

    Beans Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  2. 让你提前认识软件开发(17)：makefile文件的书写及应用

    第1部分 又一次认识C语言 makefile文件的书写及应用 [文章摘要] makefile用于Linux下整个project的编译.对于Linux下的C/C++语言的编译是至关重要的. 本文以实际的 ...

  3. Android开发经验—不要指望类finalize干活的方法做你想要什么

    之所以专门写了一篇文章finalize方法博客,这是通过在坑的方法引起的.一个读写jni当数据类.我在课堂上finalize该方法被调用来关闭文件和释放内存的方法.频繁调用这个类的时候在JNI里面报异 ...

  4. java设计模式演示示例

    创建一个模式 1.工厂方法模式(Factory Method)  该程序创建的操作对象,独自一人走出流程,创建产品工厂接口.实际的工作转移到详细的子类.大大提高了系统扩展的柔性,接口的抽象化处理给相互 ...

  5. 【C语言探索之旅】 第三部分第一课：SDL开发游戏之安装SDL

    内容简介 1.课程大纲 2.第三部分第一课: SDL开发游戏之安装SDL 3.第三部分第二课预告: SDL开发游戏之创建窗口和画布 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会 ...

  6. JAVA中的I/O流以及文件操作

    一 JAVA语言中主要通过流来完成IO操作. 流:计算机的输入输出之间流动的数据序列,也是类的对象.java中的流方式就像是建立在数据交换源和目的之间的一条通信路径. 数据源:计算机中的数据源是指可以 ...

  7. Android - 直线(line)画法

    Android - 直线(line)画法 本文地址: http://blog.csdn.net/caroline_wendy 横线(horizontal line) <View android: ...

  8. JTextArea Demo

    在往JTextArea中填充数据时,JTextArea上的滚动条也可以拖动.解决办法:主线程放在EDT中,fill JTextArea的操作放在另外一个线程中,这样fill操作与GUI上的操作就分离了 ...

  9. poj3281-Dining ，最大流量，内置图

    id=3281">点击打开链接 分析: 求最大流 建图: 拆点 牛拆成左边与食物相连的左牛 和 右边与饮料相连的右牛 1.s->食物 连边 2.食物->左牛 3.左牛-&g ...

  10. Cordova WP8 平台安装部署

    原文:Cordova WP8 平台安装部署 Cordova是一个开放源码移动开发框架. 它允许您使用标准的 web 技术如 HTML5. CSS3 和 JavaScript 进行跨平台开发,避免每个移 ...