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. [线段树]HDOJ5091 Beam Cannon

    题意:给n, w, h  (1 <= N <= 10000,1 <= W <= 40000,1 <= H <= 40000) $w\times h$是可以射到的范围 ...

  2. c/c++ 重载 数组 操作符[] operator[ is ambiguous, as 0 also mean a null pointer of const char* type.

    // Note: //int x = a[0].GetInt(); // Error: operator[ is ambiguous, as 0 also mean a null pointer of ...

  3. 【Linux安全】防止 root 用户远程登录

    防止 root 用户远程登录,在终端输入以下命令: vim /etc/ssh/sshd_config 修改如下行为:no PermitRootLogin no 如图所示:

  4. webstore+nodejs

    新建一个普通的project. 编写如下代码: var http=require('http'); http.createServer(function(req,res){ res.writeHead ...

  5. Understanding Memory Management（2）

    Understanding Memory Management Memory management is the process of allocating new objects and remov ...

  6. ActiveX添加测试工程， 出现的问题[非选择性参数][找不到成员]

    ActiveX 添加测试工程 1.新建工程MFC application, 2.添加完毕,在main Dialog中, 右键[Insert Activex Control],选择你的ActiveX控件 ...

  7. apache 实用配置

    1.反向代理 反向代理是指想访问目标机器,但无法直接访问,此时,可以通过与目标机器相同网络段的机器做桥接,通过访问桥接机器,访问目标机器,称为反向代理. vi httpd.conf 将代理配置开放: ...

  8. POJ 2406

    思路:由于题目要求的是最大值,因此从n开始向下查找,第一次出现的满足条件的那个数就是最大的,查找就可以结束,如果查找到1是仍未找到合适的值,则为1,就是说不是任何字符串的次方如abcd #includ ...

  9. VS2008压力测试时web测试记录器无显示

    系统:win7 浏览器:IE8 web测试记录器:Web Test Recorder   在运行vs2008Web压力测试时一直在浏览器左侧的web测试记录器无显示. 解决办法:     在IE工具栏 ...

  10. Dynamic Vertex Buffers

    ynamic vertex buffers on the other hand allow us to manipulate the information inside the vertex buf ...