<!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. 20145236《网络攻防》Exp4 恶意代码分析

    20145236<网络攻防>Exp4 恶意代码分析 一.基础问题回答 如果在工作中怀疑一台主机上有恶意代码,但只是猜想,所有想监控下系统一天天的到底在干些什么.请设计下你想监控的操作有哪些 ...

  2. 转 jeecg3.5中多数据源的配置

    官方微信有介绍通过web界面配置的方法:浅谈jeecg多数据源的使用,没试过不知道能不能用. 如果要手工配置也是可以的 在spring-mvc-hibernate.xml这个配置文件中增加一个数据源, ...

  3. MP实战系列(六)之代码生成器讲解

    MP的代码生成器可谓用"简洁"二字,来形容. 我个人觉得jeesite的代码生成器都不一定比它好用.当然也是由于我个人的习惯. 只需一键执行main方法,就可以生成对应的项目文件, ...

  4. Matlab计算的FFT与通过Origin计算的FFT

    实验的过程中,经常需要对所采集的数据进行频谱分析,软件的选择对计算速度影响挺大的.我在实验过程中,通常使用Origin7.5来进行快速傅里叶变换,因为方便快捷,计算之后,绘出来的图也容易编辑.但是当数 ...

  5. highchart 对于顶端刻度丢失问题

    title: { text: '', align: 'center' }, labels: { overflow: 'justify', formatter: function () { return ...

  6. WireShark抓包工具使用

    WireShark是一款网络封包分析软件,它抓取网络封包,并尽可能显示出最详细的封包资料. wireshark的准备工作 安装wireshark sudo apt-get install wiresh ...

  7. Maven学习笔记-03-Eclipse和Maven集成

    本文使用 Eclipse 集成 Maven,并创一个基于 maven的web工程 一 环境版本信息 本文使用的版本信息如下: Eclipse Version: Mars.1 Release (4.5. ...

  8. 判断response.data是否为空

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

  9. C# SignalR 即时通信

    MSDN教程:https://docs.microsoft.com/en-us/aspnet/signalr/ 个人博客:http://www.cnblogs.com/zhili/p/SignalRQ ...

  10. HDU 6165 FFF at Valentine

    题目大意:给出一个有向图,问你这个图中是否对于任意两点\(u,v\),都至少满足\(u\to v\)(\(u\)可到达\(v\),下同)或\(v\to u\)中的一个. 一看就是套路的图论题,我们先把 ...