很多时候，组件实例的外观和行为我们通过props进行定制就可以了。因为任何时候，组件实例的表现只跟 传过来的props属性 相关。
我们称这种为 无状态/ stateless 组件
即它自身是 无记忆的
 
比如切换开关，它可以响应用户的点击事件，如果当前状态是关，那么它就 切换到开的状态（显示开状态的图片）；而如果当前状态是开，那么它就切换到关的 状态（显示关状态的图片）
 
状态记忆：state
React引入了状态机的概念，让组件具有不同的状态，使得组件具有记忆功能
具体如下：
  • state ——组件的状态
每个组件都有一个state变量，保存组件的当前状态。用this.state可以获取到组件的当前状态。
 
  • getInitialState()——设置组件初始状态
开发者应当写一个getInitialState() 方法来设置组件的初始状态。该方法必须返回一个JSON对象或者空值null。
 
  • setState(currentState)——设置当前组件状态
currentState必须是一个JSON对象，但只需要写上需要设置的状态的键值对，不必把所有状态变量都包含。
我们虽然可以对this.state进行赋值来设置当前组件的状态。但是React官方推荐使用setState()，因为用该方法会自动重新渲染组件。当前如果有特殊需求，是可以用this.state的。
 
具体运用如下面这个开关的例子：
 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>EzSwitchComp</title>

     <script src="lib/react.min.js"></script>

     <script src="lib/JSXTransformer.js"></script>

 </head>

 <body>

     <div id="content"></div>

     <script type="text/jsx">

         //组件定义

         var EzSwitchComp = React.createClass({

             //设置初始状态

             getInitialState : function(){

                 return {on : false};

             },

             //处理点击事件，切换状态

             onClick : function(){

                 //读取并重设状态，这将触发重新渲染

                 this.setState({on : !this.state.on});

             },

             render : function(){

                 //根据状态设置样式

                 img = this.state.on ? "img/switch-on.png" : img = "img/switch-off.png";

                 //返回元素

                 return <img src = {img} style={{width:"150px"}} onClick={this.onClick}/>;

             }

         });

         //渲染

         React.render(

             <EzSwitchComp/>,

             document.querySelector("#content"));

     </script>

 </body>

 </html>
 
 
我们这里加一个需求，开关只有4次的寿命，即只能切换4次，之后alert出坏了。
下面我们就来实现，首先既然要保存寿命这个变量，让组件有记忆功能，那么就是继续使用state
直接上代码吧
 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>EzSwitchComp</title>

     <script src="lib/react.min.js"></script>

     <script src="lib/JSXTransformer.js"></script>

 </head>

 <body>

     <div id="content"></div>

     <script type="text/jsx">

         //组件定义

         var EzSwitchComp = React.createClass({

             //设置初始状态

             getInitialState : function(){

                 return {

                          on : false,

                          life: 4

                 };

             },

             //处理点击事件，切换状态

             onClick : function(){

                 if(!!this.state.life)

                 　　//读取并重设状态，这将触发重新渲染

                 　　this.setState({"on" : !this.state.on,"life": --this.state.life });

                 else

                 　　alert('已完');

             },

             render : function(){

                 //根据状态设置样式

                 img = this.state.on ? "img/switch-on.png" : img = "img/switch-off.png";

                 //返回元素

                 return <img src = {img} style={{width:"150px"}} onClick={this.onClick}/>;

             }

         });

         //渲染

         React.render(

             <EzSwitchComp/>,

             document.querySelector("#content"));

     </script>

 </body>

 </html>
这里不小心犯了一个小错误，就是this.setState({"on" : !this.state.on,"life": --this.state.life });
这句话，之前写了是 life:this.state.life--   ,然后发现console出来的this.state.life一直是4，至于这里的错误的原因，相信看官想想就明白了，就不多说了。
 
 
 
生命周期
熟悉WebComponent的同学应该都知道，组件是有生命周期的，在WebComponent中，就有4个生命周期的回调函数。
在React中，生命周期的回调函数分的更细
 
componentWillMount()——组件实例即将初次渲染时调用，整个周期中只调用1次
 
componentDidMount()——组件实例初次渲染后调用，只调用1次
 
componentWillReceiveProps(nextProps)——组件实例即将设置新属性时调用，nextProps表示新属性值。在此方法内调用setState()不会引起重新渲染。（不知道这个有什么特别的用法）
 
shouldComponentUpdate(nextProps, nextState)——组件实例即将重新渲染时调用。此方法返回false时，组件实例不会被渲染，true则渲染。通过forceUpdate()方法进行重新渲染时，这个方法不会被调用。
componentWillUpdate(nextProps, nextState)——组件实例即将重新渲染时调用。不能在此方法内调用setState()
 
componentDidUpdate(prevProps, prevState)——组件实例重新渲染后调用
 
componentWillUnmount()——组件实例即将从DOM树中移除时调用，只调用1次
 
 
 
好了,今天先这样，明天继续.....
 
 
 

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

  1. React.js再探（四）

    不知道看官们还记不记得上一节的内容,关于生命周期的.我们来个例子重温且练习一下. 传送门:http://www.cnblogs.com/galenyip/p/4574400.html 我们来实现一下时 ...

  2. React.js再探（二）

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

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

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

  4. React.js终探（六）

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

  5. react.js 从零开始（三）JSX 语法及特点介绍

    什么是jsx? jsx = JavaScript + xml jsx 是一种 Ecmascript 的一种新标准. jsx 是一种 带有结构性的语法. jsx 的特点: 1.类xml语法易于理解. 2 ...

  6. React.js终探（五）

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

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

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

  8. React.js 三周 -- 入门到搭建团队基础项目

    吐槽 公司自己的产品,由于历史遗留问题,前端一直是和java放到一个项目里写的. 导致了,前端就被死死的绑在了IDEA战车上.想要看页面效果,先起几个java服务.想要调试一个改动,重启个java服务 ...

  9. 从源码的角度再看 React JS 中的 setState

    在这一篇文章中,我们从源码的角度再次理解下 setState 的更新机制,供深入研究学习之用. 在上一篇手记「深入理解 React JS 中的 setState」中,我们简单地理解了 React 中 ...

随机推荐

  1. Android 省市县 三级联动（android-wheel的使用）

    转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/23382805 今天没事跟群里面侃大山,有个哥们说道Android Wheel这个 ...

  2. [INS-32052] Oracle基文件夹和Oracle主文件夹位置同样

    1.错误描写叙述 [INS-32052] Oracle基文件夹和Oracle主文件夹位置同样 2.错误原因    Oracle基文件夹和Oracle主文件夹位置同样 3.解决的方法    Oracle ...

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

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

  4. POST和Get辨析

    在Form里面,能够使用post也能够使用get.它们都是method的合法取值,可是两者也有不同,主要差别在于传递和获取參数的方式不同 一.Get方法: 1.參数的传递方式: 通过URL请求来传递用 ...

  5. 阿里2015回顾面试招收学历（获得成功offer）

    1. 引言 继上次"百度2015校园招聘面试题回顾录(成功拿到offer)"文章过后,大家都希望除了题目之外.最好能给出自己当时的回答情况,看看有没有什么回答技巧,这样更有參考价值 ...

  6. Codeforces Round #252 (Div. 2) 441B. Valera and Fruits

    英语不好就是坑啊.这道题把我坑残了啊.5次WA一次被HACK.第二题得分就比第一题高10分啊. 以后一定要加强英语的学习,要不然就跪了. 题意:有一个果园里有非常多树,上面有非常多果实,为了不然成熟的 ...

  7. COCOS2D-X FRAME动画创作随笔

    CCAnimate继承CCActionInterval,和CCAnimate是一家action,有着action所有的属性和方法. CCAnimate一些重要的方法: static CCAnimate ...

  8. Bash多个配置文件通常用于

    Login shells阅读下面的启动文件: 文件 内容 /etc/profile 对全部用户开放的全局配置文件 ~/.bash_profile 某个用户个人的启动文件,能用作个人的全局设置 ~/.b ...

  9. OpenCV300 CMake生成project在项目过程中的问题

    2015年6一个月4日本.OpenCV官网上面给出了最新版本号OpenCV.这是:3.0.0版本号,http://opencv.org/ 使用CMake它产生VS2010project流程.我遇到了一 ...

  10. 设计模式--简单工厂VS工厂VS抽象工厂

    前几天我一直在准备大学毕业生,始终绑起来,如今,终于有时间去学习设计模式.我们研究今天的话题是植物三口之家的设计模式的控制--简单工厂VS工厂VS抽象工厂. 经过细心推敲,我们不难得出:工厂模式是简单 ...