<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/react.js"></script>
  <script src="js/react-dom.js"></script>
  <script src="js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">

  var MySwitch = React.createClass({
    componentWillUpdate:function(props,state){
      console.log(state);
    },
    getInitialState:function(){
      return {switch:false}
    },
    handleClick:function(){
      this.setState({switch:!this.state.switch});
    },
    render:function(){
      return <button onClick={this.handleClick}>
        {"当前状态为："+this.state.switch}
      </button>
    }
  })
  ReactDOM.render(
  <MySwitch/>,
  document.getElementById('example')
  )

</script>

</body>
</html>

React componentWillUpdate的更多相关文章

  1. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  2. React 入门教程

    React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...

  3. 通往全栈工程师的捷径 —— react

    腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...

  4. React学习笔记。

    有段时间没写博客了,最近这段时间有点说不出的苦,虽然说年轻的时候该多出去经历些事,但每次找工作东跑西跑,坐公交坐地铁浪费了我太多时间,我感觉到这是一种浪费,对生命的浪费.所以很想尽快找到一份工作,去努 ...

  5. React.js深入学习详细解析

    今天,继续深入学习react.js. 目录: 一.JSX介绍 二.React组件生命周期详解 三.属性.状态的含义和用法 四.React中事件的用法 五.组件的协同使用 六.React中的双向绑定   ...

  6. 初探React，将我们的View标签化

    前言 我之前喜欢玩一款游戏:全民飞机大战,而且有点痴迷其中,如果你想站在游戏的第一阶梯,便需要不断的练技术练装备,但是腾讯的游戏一般而言是有点恶心的,他会不断的出新飞机.新装备.新宠物,所以,很多时候 ...

  7. webpack+react+antd 单页面应用实例

    React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...

  8. React Native 之生命周期

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  9. 前端React开发入门笔记

    什么是React React是一个JavaScript库,是由FaceBook和Instagram开发的,主要用于用户创建图形化界面. Hello world <!DOCTYPE html> ...

随机推荐

  1. OpenSCAD（1）基础教程

    https://blog.csdn.net/freewebsys/article/details/49993049 官网 https://en.wikibooks.org/wiki/OpenSCAD_ ...

  2. mybatis collection使用注意

    背景 今天我在使用collection时候,出现数据库有两条数据,但是却返回一条,在复制这条数据到四条后,依然返回一条 分析 这四条数据,数据库的每个字段值完全相同,所以估计是当成一条处理了 如果随便 ...

  3. intellij idea 修改背景保护色&&修改字体&&快捷键大全(转)

    文章转自http://blog.csdn.net/hpf911/article/details/16888797 近Idea比较流行,Eclipse因为maven的问题,运行起来非常慢,各种提示也不够 ...

  4. java开发过程问题及解决

    1.junit做测试时候报异常: junit.framework.AssertionFailedError: No tests found in com.mq.original.OriginalMqP ...

  5. Qt+Qgis二次开发：地理实体抽象

    1  概述 地理实体抽象是指点.线.面及其组合而成的,用于描述实际地物的数据结构. 其中包含几何实体和属性数据. GIS中进行几何操作,以各种实体类为基础进行操作. 在OGC中,地理实体可以由WKT表 ...

  6. PAT A1149 Dangerous Goods Packaging （25 分）——set查找

    When shipping goods with containers, we have to be careful not to pack some incompatible goods into ...

  7. Android TimeAnimator && TimeListener翻译

    TimeAnimator:提供了一个简单的回调机制,通过 TimeAnimator.TimeListener,在动画的每一帧处通知你.这个动画器没有时间,插值或是对象值设定.回调监听器为每一帧动画接受 ...

  8. CF535E Tavas and Pashmaks 单调栈、凸包

    传送门 题意:有一场比赛,$N$个人参加.每个人有两种参数$a,b$,如果存在正实数$A,B$使得$\frac{A}{a_i} + \frac{B}{b_i}$在$i=x$处取得最大值(可以有多个最大 ...

  9. 判断response.data是否为空

    需要对response.data进行判断,是否有数据返回.如果是空的,将要处理一些事情,反之,又要处理另外一些事情. 在jQuery程序中,有一个方法:$.isEmptyObject().此方法在an ...

  10. SSL踩坑ERR_SSL_VERSION_OR_CIPHER_MISMATCH

    最近公司项目开发了一个微信小程序,并且部署测试OK,由于微信小程序调用的后端接口必须是HTTPS,所以给接口安装了SSL,第一天测试都正常.第二天早上再使用时页面无响应. 抓包发现是后端接口抛出: n ...