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. CoreData的简单使用（二）数据的增删改查，轻量级的版本迁移

    上一篇中我们已经使用CoreData创建了一个SQLite数据库 CoreData的简单使用(一)数据库的创建 现在对数据库进行数据的CRUD(增删改查) 1.Data Model 的设置 创建一个D ...

  2. 插入排序InsertionSort

    /** * * @author Administrator * 功能:插入排序法 */ package com.test1; import java.util.Calendar; public cla ...

  3. 将手机micro USB口转换为USB type C连接器的低成本方案

    我们知道USB IF提出的type C连接器的终极目标是统一各种USB 接口. 尽管USB 3.0在PC市场上发展的风生水起,但是由于USB 3.0对手机4G LTE的EMI和RFI干扰,导致市场上除 ...

  4. Android开发：Translucent System Bar 的最佳实践

    Translucent System Bar 的最佳实践 近几天准备抽空总结Android一些系统UI的实践使用,于是开始动手建了一个库AndroidSystemUiTraining ,边撸代码边写总 ...

  5. gtest的安装和测试[good]

    一.前言 本篇将介绍一些gtest的基本使用,包括下载,安装,编译,建立我们第一个测试Demo工程,以及编写一个最简单的测试案例. 二.下载 如果不记得网址, 直接在google里搜gtest,第一个 ...

  6. C#实现微信公众号群发消息（突破破解一天只能发一次的限制）

    总体思路:1.首先必须要在微信公众平台上申请一个公众号. 2.然后进行模拟登陆.(由于我对http传输原理和编程不是特别懂,在模拟登陆的地方,不是特别清楚,希望有大神指教) 3.模拟登陆后会获得一个t ...

  7. TFS源代码管理

    一.服务器配置 1.创建一个Visual Studio Online账户 打开VS,选择团队资源管理器(视图菜单下),然后在团队资源管理器中选择注册Team Foundation Service,打开 ...

  8. 指尖下的js ——多触式web前端开发之一：对于Touch的处理

    指尖下的js ——多触式web前端开发之一:对于Touch的处理 水果公司的那些small and cute的设备给我们提供了前所未有的用户体验.当用户在iphone和ipad上运指如飞的时候,那些使 ...

  9. C# winform自定义Label控件使其能设置行距

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  10. （转）如何正确使用C++多重继承

    http://bigasp.com/archives/486 如何正确使用C++多重继承 2011年06月17日 — Asp J 原创文章,转载请注明:转载自Soul Apogee本文链接地址:如何正 ...