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. Linux中与DNS相关的内容

    Linux中与DNS有关的三个东西: 1. 主机名 2. DNS服务器 3. Host文件 Linux中和DNS有关的三个文件: 1. /etc/hostname 2. /etc/resolv.con ...

  2. configure文件中判断某函数或库是否存在的一个方法

    echo " #include<stdio.h> #include<openssl/ssl.h> int main() { return 0; } " &g ...

  3. ANDROID_MARS学习笔记_S01原始版_003_对话框

    1.AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest ...

  4. HashMap与HashTable联系与区别

    HashMap与HashTable 1.hashMap去掉了HashTable 的contains方法,但是加上了containsValue()和containsKey()方法. 2.hashTabl ...

  5. 坑爹的libxml2 for mingw 编译 （二)

    makefile 中由于大量使用了cmd /C ""样式去执行mkdir和copy操作,导致mingw最后出错,因为会从mingw切换至cmd界面.因此需要把相关代码进行修改. # ...

  6. [HDU 1430] 魔板

    魔板 Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...

  7. C# GC.Collect()

    用C#写了一个运用ICE组件进行接口通信的服务程序,程序运行很正常,可是在客户端调用ICE接口时出现了大量的数据丢失,而且偶尔还通信不上,服务端最明显的现象就是telnet服务的通信端口时不通(cmd ...

  8. Apache设置防DDOS模块mod_evasive

    mod_evasive 是Apache(httpd)服务器的防DDOS的一个模块.对于WEB服务器来说,是目前比较好的一个防护DDOS攻击的扩展模块.虽然并不能完全防御 DDOS攻击,但在一定条件下, ...

  9. NOIP2011普及组 瑞士环 保序性

    题目链接:http://noi.openjudge.cn/ch0401/4363/ 分析:如果直接模拟,时间复杂度是O(r*nlogn)超时 然后我们发现每次一轮开始时,刚开始是保序的,然后我们可以把 ...

  10. 尝试加载 Oracle 客户端库时引发 BadImageFormatException。如果在安装 32 位 Oracle 客户端组件的情况下以 64 位模式运行，将出现此问题。

    从10G开始,Oracle提供了一个较为轻量级的客户包,叫做Instant Client. 将它安装好后,就不用再安装庞大的Oracle Client了. 这样一来,只要客户端下载Instant Cl ...