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. ANDROID_MARS学习笔记_S01原始版_008_Looper\Bundle异步消息处理

    一.流程 1.自定义Handler,重写handleMessage(Message msg),用msg得到bundle,从而得到传递过来的数据 2.开启android.os.HandlerThread ...

  2. PieTTY

    PieTTY 用 pietty 連上主機時 鍵盤右方數字鍵 (keypad) 失效的問題 用 pietty 連上主機時 鍵盤右方數字鍵 (keypad) 失效的問題 應該滿多人用 pietty 連上程 ...

  3. android usb host 读写USB设备

    自android3.1以后android增加了操作USB设备的API. 官网地址:http://developer.android.com/guide/topics/connectivity/usb/ ...

  4. Android ImageButton | Button | TextView 点击和触摸效果

    ImageButton------------------------------------------------> 一.Java  代码: 在drawable目录下添加新的xml文件 bu ...

  5. perl的输出缓冲

      今天写一个小脚本的时候,需要即时输出当前进度到命令行上,并即时将重要数据写入报告文件中.但是perl默认是有输出缓冲的,显示到命令行上必须以\n结尾才行,输出到文件中,回车了都不行,非得要等缓冲区 ...

  6. 协议（porotocol）

    fly.h: #import <Foundation/Foundation.h> @protocol Fly -(void) go; -(void) stop; @optional -(v ...

  7. 【HDOJ】1225 Football Score

    这种结构体排序的题,十分容易考上机题,qsort+结构体解决.马上就要机考了,多练习一下这样的题目也好. #include <stdio.h> #include <string.h& ...

  8. 【转】JNI学习积累之一 ---- 常用函数大全

    原文网址:http://blog.csdn.net/qinjuning/article/details/7595104 本文原创,转载请注明出处:http://blog.csdn.net/qinjun ...

  9. apache学习

    核心功能和多路处理模块: Core:apache HTTP服务器核心提供的功能,始终有效 Mpm_common:收集了被多个多路处理模块(MPM)实现的公共指令 其他普通模块: mod_actions ...

  10. （转）使用pth文件，让python方便的import自己写的模块

    转自:http://www.elias.cn/Python/PythonPath 文章简单易懂,有理有据. 有时候我们正在修改或调试的程序会是一个库,为修改方便,我们可能不大希望把它放到 site-p ...