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. http://www.linuxidc.com/Linux/2015-02/114265.htm

    http://www.linuxidc.com/Linux/2015-02/114265.htm

  2. 中国版dropbox“坚果云”和它背后的团队故事（大的优势就在于他为用户提供了设定多个文件夹的权利）

    (速途网专栏 作者:娄昊川)坚果云是一款中文存储服务,前身是“坚果铺子”,提供免费的云空间,与dropbox类似,用户可以直接把档案同步到坚果云,供自己和伙伴用任何设备访问.自上线以来,几乎所有用户都 ...

  3. WPF中的MatrixTransform

    原文:WPF中的MatrixTransform WPF中的MatrixTransform                                                         ...

  4. Introducing RecyclerView(一)

    RecyclerView 是Android L版本中新添加的一个用来取代ListView的SDK,它的灵活性与可替代性比listview更好.接下来通过一系列的文章讲解如何使用RecyclerView ...

  5. Python解决codeforces ---- 1

    第一题 1A A. Theatre Square time limit per test 2 seconds memory limit per test 64 megabytes input stan ...

  6. uva 11646 - Athletics Track

    题意:如图,体育场的跑道一圈是400米,其中弯道是两段半径相同的圆弧.已知矩形的长宽比例为a:b,求长和宽的具体数值. 注意:圆弧的圆心在纵轴线上! #include<iostream> ...

  7. css揭秘之linear-gradient

    很神奇的背景设置, 看代码, <html> <title>css</title> <style> .content { background: line ...

  8. POJ2104 区间第k小

    题意就是区间第k大…… 题解: 前段时间用主席树搞掉了…… 如今看到划分树,是在想来写一遍,结果18号对着学长的代码调了一上午连样例都没过,好桑心…… 今天在做NOI2010超级钢琴,忽然发现用划分树 ...

  9. 按CTRL,SHIFT,ALT等键扩展easyui的datagrid多选实现

    //------------------------------------------------------------------------------- // 当然页面文件中还需要引入的文件 ...

  10. c程序设计语言_习题8-6_利用malloc()函数，重新实现c语言的库函数calloc()

    The standard library function calloc(n,size) returns a pointer to n objects of size size , with the ...