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. [Gauss]POJ1753 Flip Game

    题意:给4×4的棋盘的初始状态,b代表黑,w代表白. 要求变成全黑或者全白 最少需要几步. 简单的做法 可以暴搜 状压bfs 不再赘述 主要学习Gauss做法 同样是01方程组 用异或解 注意全黑或全 ...

  2. UVALive 6602 Counting Lattice Squares

    给定一个n*m的网格,求面积为奇数的正方形有多少个. 首先是n*m个面积为1的,然后剩下的要么是边长为奇数,要么被这样一个奇数边长所包围. 原因如下: 对于一个边长不平行于坐标抽的正方形,其边长一定是 ...

  3. Altium Designer学习： 允许闭合回路

    使用AltiumDesigner画PCB时,顶层和底层都有电源线走 但是通过过孔链接的,主要是因为我这里可使用了几个相同的电源接口,把这些上下层的电源接口连在一起就很容易画出闭合回路,这自身没有太大的 ...

  4. Java调用存储过程时报 The user specified as a definer ('root'@'%') does not exist 解决方法

    Caused by: java.sql.SQLException: The user specified as a definer (''@'') does not exist        at c ...

  5. Spring AOP实现方式三之自动扫描注入【附源码】

    注解AOP实现  这里唯一不同的就是application 里面 不需要配置每个bean都需要配置了,直接自动扫描 注册,主要知识点是怎么通过配置文件得到bean, 注意类前面的@注解. 源码结构: ...

  6. 常用的SQL分页算法及对比

    SQL Server 2005引入的新方法. SELECT * FROM (SELECT ROW_NUMBER() OVER(ORDER BY keyField DESC) AS rowNum, * ...

  7. IPv6 tutorial – Part 6: Site-local addresses and link-local addresses

    https://4sysops.com/archives/ipv6-tutorial-part-6-site-local-addresses-and-link-local-addresses/ In ...

  8. linux，Centos，bash: service: command not found

    很简单,这个问题是这样的,su 或者 su root:的话只是将当前身份转为root,用户shell并没有改变.所以有些系统命令不能使用. su -或者su -l或者su -l root,可以完全的将 ...

  9. Luogu_1565_牛宫_(最大子矩阵)

    描述 http://www.luogu.org/problem/show?pid=1565 给出一个n*m的矩阵,求最大的且和值为正的子矩阵. 分析 很容易想到的是用前缀和维护,暴力枚举左上角和右下角 ...

  10. tyvj 1729 文艺平衡树

    文艺平衡树 From admin 背景 Background 此为平衡树系列第二道:文艺平衡树 描述 Description 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以 ...