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

传送门：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. jq分页插件

    jq分页插件 http://www.zhangxinxu.com/jq/pagination_zh/ html --------------- <tbody id="hiddenres ...

  2. [LeetCode145]Binary Tree Postorder Traversal

    题目: Given a list, rotate the list to the right by k places, where k is non-negative. For example:Giv ...

  3. C++中的class (2)

    class Father { protected void methodA(){ //do something } private void methodB(){//do something } } ...

  4. C++学习笔记25,析构函数总是会宣布virtual

    为了永远记住析构函数声明virtual----><<effective c++>> 为这句话不一定对,但无需质疑的是这句话是非常实用的. 查看以下的样例: #includ ...

  5. Mobile Services 提交批量数据

    Mobile Services批量提交数据,參考了文章:Inserting multiple items at once in Azure Mobile Services.里面事实上已经介绍得比較清楚 ...

  6. Hadoop Mapreduce刮

    前言 的一个渣渣程序猿一枚,因为个人工作,须要常常和hadoop打交道,可是自己之前没有接触过hadoop.所以算是边学边用,这个博客算是记录一下学习历程,梳理一下自己的思路,请各位看官轻拍.本博客大 ...

  7. 如此的相似，不能-------Day84

    生活中我们会遇到一些相似事儿,它可能是一个项目,我发现,你失去非常相似,其结果是不,它可以是人.你认为你一直在等待的是他(她),终于可以找到,只需简单地认为.正是这样相似. js和java语言中有不少 ...

  8. ssh连接失败，排错经验(转)

    一.场景描述 ssh连接服务器,发现连接失败,但是对应服务器的ip能够ping通. 场景: [root@yl-web ~]# ssh root@10.1.101.35 ssh_exchange_ide ...

  9. Codeforces Round #256 (Div. 2) D. Multiplication Table

    主题链接:http://codeforces.com/contest/448/problem/D 思路:用二分法 code: #include<cstdio> #include<cm ...

  10. Cocos2d-x3.0 DrawNode吸取

    DrawNode正如它的绘图形状的节点,相互作用可以使将来更加灵活. DrawNode* DrawLayer::shape() { auto shape = DrawNode::create(); s ...