React components have a lifecycle, and you are able to access specific phases of that lifecycle. This lesson will introduce mounting and unmounting of your React components.

Mounting: componentWillMount

Invoked once, both on the client and server, immediately before the initial rendering occurs. If you call setState within this method, render() will see the updated state and will be executed only once despite the state change.

Mounting: componentDidMount

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via React.findDOMNode(this).

If you want to integrate with other JavaScript frameworks, set timers using setTimeout orsetInterval, or send AJAX requests, perform those operations in this method.

Unmounting: componentWillUnmount

Invoked immediately before a component is unmounted from the DOM.

Perform any necessary cleanup in this method, such as invalidating timers or cleaning up any DOM elements that were created in componentDidMount.

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>React Lesson 9: Mounting</title>
  6. </head>
  7. <body>
  8.  
  9. <div id="panel"></div>
  10.  
  11. <button onClick="Render()">Render</button>
  12. <button onClick="Unmount()">Unmonut</button>
  13. <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
  14. <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
  15. <script type="text/jsx">
  16.  
  17.     var App = React.createClass({
  18.         getInitialState: function(){
  19.             return {
  20.                 val: 0
  21.             }
  22.         },
  23.         update: function() {
  24.           var newVal = this.state.val + 1;
  25.           this.setState({val: newVal});
  26.         },
  27.         componentWillMount: function() {
  28.             console.log("Will mount");
  29.         },
  30.         componentDidMount: function() {
  31.             console.log("Did mount");
  32.         },
  33.         componentWillUnmount: function() {
  34.             console.log("Byebye");
  35.         },
  36.         render: function(){
  37.             console.log("render");
  38.             return <button onClick={this.update}>{this.state.val}</button>
  39.         }
  40.     });
  41.  
  42.     window.Render = function() {
  43.         React.render(<App />, document.getElementById('panel'));
  44.     }
  45.  
  46.     window.Unmount = function() {
  47.         React.unmountComponentAtNode(document.getElementById('panel'));
  48.     }
  49. </script>
  50. </body>
  51. </html>

https://facebook.github.io/react/docs/component-specs.html

[React] React Fundamentals: Component Lifecycle - Mounting Basics的更多相关文章

  1. [React Fundamentals] Component Lifecycle - Mounting Basics

    React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...

  2. [React Fundamentals] Component Lifecycle - Mounting Usage

    The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...

  3. [React ] React Fundamentals: Component Lifecycle - Mounting Usage

    The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...

  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. 项目管理系统 SQL2005数据库查询CPU100%问题研究

    [一篮饭特稀原创,转载请注明出自http://www.cnblogs.com/wanghafan/p/4595084.html]  在项目管理系统中出现查询工程明细出现CPU100%卡死症状: 1.打 ...

  2. [译]GotW #89 Smart Pointers

    There's a lot to love about standard smart pointers in general, and unique_ptr in particular. Proble ...

  3. Spring AOP实现方式三【附源码】

    注解AOP实现 源码结构: 1.首先我们新建一个接口,love 谈恋爱接口. package com.spring.aop; /** * 谈恋爱接口 * * @author Administrator ...

  4. Innodb加载数据字典 && flush tables

    测试了两个case,属于之前blog的遗留问题: innodb如何加载数据字典 flush tables都做了什么操作 先来看下innodb加载数据字典: 首次使用:select * from tt; ...

  5. [Uva 11825] Hackers’ Crackdown

    Hackers’ Crackdown  Input: Standard Input Output: Standard Output   Miracle Corporations has a numbe ...

  6. Problems encountered while deleting resources.

    Error The project was not built due to “Problems encountered while deleting resources.”. Fix the pro ...

  7. 解决eclipse闪退的办法

    Eclipse Java EE 便出现打开闪退的现象. 修改eclipse.ini无效,参照了网上许多方法也不行. 最后发现了一个蛋疼的方法: 1.打开eclipse的workspace目录 2.删除 ...

  8. M-矩阵

    实方阵 $A$ 称为 $M$-矩阵, 是指 $A=cI-B$, $B\geq 0$, $c\geq \rho(B)$. 这里, $M$ 据说是暗指 Minkowski.

  9. codeforces 652C Foe Pairs 水题

    题意:给你若干个数对,给你一个序列,保证数对中的数都在序列中 对于这个序列,询问有多少个区间,不包含这些数对 分析:然后把这些数对转化成区间,然后对于这些区间排序,然后扫一遍,记录最靠右的左端点就好 ...

  10. Oracle10g数据类型

    1.     字符类型 数据类型 长度 说明 CHAR(n BYTE/CHAR) 默认1字节,n值最大为2000 末尾填充空格以达到指定长度,超过最大长度报错.默认指定长度为字节数,字符长度可以从1字 ...