<!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. 天融信资料下载官方FTP服务器

    2017年更新:最近发现天融信的FTP服务器变更为了ftp://ftp.topsec.com.cn/,用户名:topsec,密码:topsec2016(不知道后期密码会不会改成topsec2017,如 ...

  2. 纯html页面中js如何获得项目路径

    js,全称javascript,不过虽然是以java开头,不过与java一点关系都没有. js和java有如下区别: (1)js是浏览器端的语言,而java是服务器端的语言. (2)js是动态语言,j ...

  3. C++ 实现strcpy

    strcpy库函数的原型: // 把src字符串拷贝到dest,并返回dest char *strcpy(char *dest, const char *src) 注意点: 1.形参src用const ...

  4. Android 利用属ObjectAnimator，AnimatorSet性动画绘制一个弹球，加速下落，到底部时挤压，然后减速上弹

    属性动画主要的几个类介绍: 1.ValueAnimator:这个类提供了一个简单的计时引擎运行动画动画计算值和设置目标对象.注意:使用该类时一般都是用:ObjectAnimator,而基于Object ...

  5. SQL Server 中用DBCC Opentran语句查看未关闭的事务（转载）

    从SQL Server 2008开始,可以使用DBCC Opentran语句查看数据库中最早一个没有被关闭的事务,下面这篇文章讲述了如何使用DBCC Opentran语句. An Open trans ...

  6. Windows下jupyter notebook 修改打开的浏览器

    1. 打开cmd,输入jupyter notebook --generate-config 2. 根据返回的路径打开 C:\Users\Administrator\.jupyter\jupyter_n ...

  7. JS-隐士类型转换‘1’+1、‘1’-1、++‘1’为什么不一样？

    当 x=’1’时,x+1x-1+x-x++xtypeof(x+1)typeof(x-1)typeof(+x)typeof(-x)typeof(++x) 的结果分别是多少? 答案: x+1 //’11’ ...

  8. RabbmitMQ-工作队列及相关概念

    工作队列-WorkQueue 实现功能: 将耗时的任务分发给多个工作者 设计思想: 避免直接去做一件资源密集型的任务,并且还得等它完成.因此将任务安排后再去做.将任务封装为一个消息,发到队列中.一个工 ...

  9. 如何构造分层次的 Json 数据

    十年河东,十年河西,莫欺骚年穷...打错个字~_~ 现有如下需求,构造分层次的Json数据,层次结构类似下图: 上图使用EasyUI生成的,静态HTML如下: <html xmlns=" ...

  10. 【强化学习】python 实现 saras lambda 例一

    本文作者:hhh5460 本文地址:https://www.cnblogs.com/hhh5460/p/10147265.html 将例一用saras lambda算法重新撸了一遍,没有参照任何其他人 ...