The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson you will learn some simple uses for these hooks.

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Component Lifecycle: Mounting Uses</title>

    <script src="http://fb.me/react-0.8.0.js"></script>

    <script src="http://fb.me/JSXTransformer-0.8.0.js"></script>

    <style>

    body {

        margin: 25px;

    }

    </style>

</head>

<body>

<button onClick="render()">Render</button>

<button onClick="unmount()">Unmount</button>

<hr />

<div id="panel"></div>

<script type="text/jsx">

    /** @jsx React.DOM */

    var APP =

        React.createClass({

            update:function(){

                var newVal = this.props.val+1

                this.setProps({val:newVal})

            },

            componentWillMount:function(){

                this.setState({m:2});

                if(this.props.val===0){

                    this.btnStyle = {'color':'red'}

                }

            },

            render:function(){

                console.log("hello world")

                return  <button

                                    style={this.btnStyle}

                                    onClick={this.update}>

                                    {this.props.val*this.state.m}

                                </button>

            },

            componentDidMount:function(){

                this.inc = setInterval(this.update,500)

            },

            componentWillUnmount:function(){

                console.log("goodbye cruel world!")

                clearInterval(this.inc)

            },

        });

        window.render = function(){

            React.renderComponent(

                <APP val={0} />,

                document.getElementById('panel'))

        }

        window.unmount = function(){

            React.unmountComponentAtNode(document.getElementById('panel'))

        }

</script>

</body>

</html>

[React ] React Fundamentals: Component Lifecycle - Mounting Usage的更多相关文章

  1. [React Fundamentals] Component Lifecycle - Mounting Usage

    The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...

  2. [React Fundamentals] Component Lifecycle - Mounting Basics

    React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...

  3. [React] React Fundamentals: Component Lifecycle - Mounting Basics

    React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...

  4. [React] React Fundamentals: Component Lifecycle - Updating

    The React component lifecycle will allow you to update your components at runtime. This lesson will ...

  5. [React Fundamentals] Component Lifecycle - Updating

    The React component lifecycle will allow you to update your components at runtime. This lesson will ...

  6. React.js Tutorial: React Component Lifecycle

    Introduction about React component lifecycle. 1 Lifecycle A React component in browser can be any of ...

  7. React.createClass 、React.createElement、Component

    react里面有几个需要区别开的函数 React.createClass .React.createElement.Component 首选看一下在浏览器的下面写法: <div id=" ...

  8. React 中的 Component、PureComponent、无状态组件 之间的比较

    React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...

  9. React Native 中 component 生命周期

    React Native 中 component 生命周期 转自 csdn 子墨博客  http://blog.csdn.net/ElinaVampire/article/details/518136 ...

随机推荐

  1. cocos2d-x for js 继承的写法

    cocos2d-x for js中集成了两套继承写法,一套是JR的(jquery的作者),一套是google. 目前来说,cocos2d-x for js demo使用JR的写法----未完待续... ...

  2. !! python 之半年总结

    http://blog.chinaunix.net/uid-26443921-id-3481357.html 半年前开始系统完整深入的了解学习 python 读书篇: <python 核心编程2 ...

  3. Android开发之bindService()侦听service内部状态

    在Android开发之bindService()通信的基础上,实现bindService()方法侦听service内部状态. 实现侦听service内部状态,使用的是回调机制 1.首先实现一个接口 p ...

  4. DesignPatterns

    1.设计模式,说明工厂模式.  总共23种,分为三大类:创建型,结构型,行为型 创建型 1. Factory Method(工厂方法) 2. Abstract Factory(抽象工厂) 3. Bui ...

  5. VS2012、VS2010、VS2008常用的快捷键

    下面为大家带来VS各个版本常用的快捷方式,希望对大家开发过程中有帮助: 强迫智能感知:Ctrl+J: 强迫智能感知显示参数信息:Ctrl-Shift-空格: Ctrl+E,D ----格式化全部代码 ...

  6. PHP 'ext/gd/gd.c' gdImageCrop空指针返回拒绝服务漏洞

    漏洞版本: PHP 5.5.x 漏洞描述: CVE ID:CVE-2013-7327 PHP是一种HTML内嵌式的语言. PHP 'ext/gd/gd.c' gdImageCrop函数没有检查返回值, ...

  7. WordPress FunCaptcha插件跨站脚本漏洞

    漏洞名称: WordPress FunCaptcha插件跨站脚本漏洞 CNNVD编号: CNNVD-201311-431 发布时间: 2013-11-29 更新时间: 2013-11-29 危害等级: ...

  8. my sql 实现批量操作及注意问题

    使用in来实现批量操作是个很不错的想法: /*实现查询*/ select * from goods where goodsid in (102,103); /*实现批理删除*/ delete from ...

  9. C# 多线程(lock,Monitor,Mutex,同步事件和等待句柄)

    本篇从 Monitor,Mutex,ManualResetEvent,AutoResetEvent,WaitHandler 的类关系图开始,希望通过本篇的介绍能对常见的线程同步方法有一个整体的认识,而 ...

  10. [King.yue]Grid列选中JS控制按钮状态

    Grid列选中一行某些按钮启用 例:gridId(Grid   ID) btnEditId(编辑按钮ID) btnDeleteId(删除按钮ID) JS: var setButtonStatus = ...