1. 销毁阶段可以使用的函数:
    componentWillUnmount:在删除组件之前进行清理操作,比如计时器和事件监听器。因为这些函数都是开发者手动加上去的,react不知道,必须进行手动清理。
  2. 实例
    第一种方式:在render中,把之前已有的页面去掉,反映到页面中,就是把它删掉。
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>测试触发顺序,不输入不会触发五个函数,只会触发render</title>
    </head>
    <body>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
    <script type="text/jsx">
    var style={
    color:"red",
    border:"1px solid #f99",
    width:"200px",
    height:"50px"
    };
    var HelloWorld= React.createClass({
    render:function(){
    console.log("render,4");
    return <p>Hello,{this.props.name ? this.props.name : "World"}</p>;
    },
    componentWillUnmount:function(){
    console.log("BOOM");
    },
    });
    var HelloUniverse=React.createClass({
    getInitialState:function(){
    return {name:""};
    },
    handleChange:function(event){
    //用来响应input的输入事件
    this.setState({name:event.target.value});
    },
    render:function(){
    if(this.state.name == "123"){
    return <div>123</div>
    }
    return <div>
    <HelloWorld name={this.state.name
    //这里引用了HelloWorld的组件,所以HelloUniverse是他的子组件
    }></HelloWorld>
    <br />
    <input type="text" onChange={this.handleChange} />
    </div>
    },
    });
    React.render(<div style={style}><HelloUniverse></HelloUniverse></div>,document.body)
    // 写为React.render(<div style={style}><HelloWord></HelloWorld></div>,document.body)看看效果
    </script>
    </body>
    </html>

    输入别的不会触发

    当输入123的时候

    第二种:就是使用react提供的一个函数unmountComponentAtNode

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
    <script type="text/jsx">
    var style={
    color:"red",
    border:"1px solid #f99",
    width:"200px",
    height:"50px"
    };
    var HelloWorld= React.createClass({
    render:function(){
    console.log("render,4");
    return <p>Hello,{this.props.name ? this.props.name : "World"}</p>;
    },
    componentWillUnmount:function(){
    console.log("BOOM");
    },
    });
    var HelloUniverse=React.createClass({
    getInitialState:function(){
    return {name:""};
    },
    handleChange:function(event){
    //判断的是input里面的值,如果是123,我们就使用unmountComponentAtNode来删除
    //使用unmountComponentAtNode时,传入的必须是装载时候的节点。 if(event.target.value == "123"){
    React.unmountComponentAtNode(document.getElementsByTagName("body")[0]);
    return;
    }
    this.setState({name:event.target.value});
    },
    render:function(){
    return <div>
    <HelloWorld name={this.state.name
    //这里引用了HelloWorld的组件,所以HelloUniverse是他的子组件
    }></HelloWorld>
    <br />
    <input type="text" onChange={this.handleChange} />
    </div>
    },
    });
    React.render(<div style={style}><HelloUniverse></HelloUniverse></div>,document.body)
    // 写为React.render(<div style={style}><HelloWord></HelloWorld></div>,document.body)看看效果
    </script>
    </body>
    </html>

React学习笔记-7-销毁阶段的更多相关文章

  1. React学习笔记(一)- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

  2. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  3. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

  4. React学习笔记(七)条件渲染

    React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...

  5. React学习笔记(六)事件处理

    React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...

  6. React学习笔记(五)State&声明周期

    React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...

  7. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  8. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

  9. React学习笔记 - JSX简介

    React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...

随机推荐

  1. java 中正则表达式匹配

    String str = "#a#,#b#"; String reg="\\#+[^\\#]+\\#+"; Pattern p=Pattern.compile( ...

  2. Puzzle 面向服务/切面(AOP/IOC)开发框架 For .Net

    Puzzle 面向服务/切面AOP开发框架 For .Net AOP主要实现的目的是针对业务处理过程中的切面进行提取,它所面对的是处理过程中的某个步骤或阶段,以获得逻辑过程中各部分之间低耦合性的隔离效 ...

  3. Sensitive directory/file Integrity Monitoring and Checking

    catalogue . OSSEC . HashSentry: Host-Based IDS in Python . Afick . 检测流程 1. OSSEC OSSEC is an Open So ...

  4. linux安装maven

    一.下载maven 最新地址在:http://maven.apache.org/download.cgi 我下载的是:apache-maven-3.3.9-bin.tar.gz,是已经编译好的包 解压 ...

  5. TThread.CreateAnonymousThread() 匿名线程对象的应用

    unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System ...

  6. eclipse设置快速提示符

    省掉废话,一个快速提示符真的能快速地提高编程效率. 下面介绍如何设置eclipse的快速提示符. 步骤如下: Windows --> preferences --> java --> ...

  7. showPrompt弹框提示

    工作中会有很多的弹框,用来添加模板,用来信息提示,,我现在用的模板有dialog(用来添加数据模板内容),还有一个就是自写的showPrompt用来判断错误或者正确的信息~~ 样子大概就是这样的,, ...

  8. [Storm] Storm与asm的恩恩怨怨

    asm的引用冲突 1. Jersey & Storm 0.9.3 jersey 1.8 (which depends on asm 3.0) Storm 0.93 (which depends ...

  9. Oracle的外部表

    一.外部表特性 数据文件位于操作系统之外,并且具有一定的格式分割的文本文件或其他类型文件.ORACLE的外部表通过SQL的形式访问数据文件中的数据,数据并不需要加载到数据库中且数据是可读的,所以不用D ...

  10. virut详细分析

    Virut分析 0x00.综合描述 virut样本的执行过程大体可以分为六步:第一步,解密数据代码,并调用解密后的代码:第二步,通过互斥体判断系统环境,解密病毒代码并执行:第三步,创建内存映射文件,执 ...