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输入 撤销的更多相关文章

  1. React 环境搭建及页面调试方法

    React 环境搭建及页面调试方法 |作者:RexFang |出处:http://www.cnblogs.com/rexfang/ |关于作者:Java 程序员一枚 |版权:本文版权归作者和博客园共有 ...

  2. D触发器

    普通的电路,以及常规的逻辑门都有一个共性,那就是输出直接依赖于输入,当输入消失的时候,输入也跟着不存在了.触发器不同,当它触发的时候,输出会发生变化.但是,当输入撤销之后,输出依然能够维持. 这就是说 ...

  3. Emacs快捷键列表

    C = ControlM = Meta = Alt | EscDel = Backspace 基本快捷键(Basic)C-x C-f "find"文件, 即在缓冲区打开/新建一个文 ...

  4. EMACS快捷键

    C = Control M = Meta = Alt | Esc Del = Backspace 基本快捷键(Basic) C-x C-f "find"文件, 即在缓冲区打开/新建 ...

  5. Emacs_快捷键列表

    Emacs_快捷键列表 emacs -nw 以终端模式运行emacsLC_CTYPE=zh_CN.UTF-8 emacs C = Control M = Meta = Alt | EscAlt 可以粘 ...

  6. Emacs快捷键（较全）

    C = Control M = Meta = Alt | Esc Del = Backspace 基本快捷键(Basic) C-x C-f "find"文件, 即在缓冲区打开/新建 ...

  7. 【UE4 设计模式】命令模式 Command Pattern

    概述 描述 将一个请求封装为一个对象,从而使我们可用不同的请求对客户进行参数化:对请求排队或者记录请求日志,以及支持可撤销的操作. 命令模式是一种对象行为型模式,其别名为动作(Action)模式或事务 ...

  8. React Native 文本输入

    TextInput是一个允许用户输入文本的基础组件.它有一个名为onChangeText的属性,此属性接受一个函数,而此函数会在文本变化时被调用.另外还有一个名为onSubmitEditing的属性, ...

  9. Android仿iPhone晃动撤销输入功能(微信摇一摇功能)

    重力传感器微信摇一摇SensorMannager自定义alertdialogSensorEventListener 很多程序中我们可能会输入长文本内容,比如短信,写便笺等,如果想一次性撤销所有的键入内 ...

随机推荐

  1. oaracel 函数_行转列

    wm_concat(varchar2) 组函数

  2. Linux下svn常用指令【转】

    转自:http://blog.csdn.net/myarrow/article/details/8110858 Windows下的TortoiseSVN是资源管理器的一个插件,以覆盖图标表示文件状态, ...

  3. Filter功能

    在HttpServletRequest到达 Servlet 之前,拦截客户的HttpServletRequest .根据需要检查HttpServletRequest,也可以修改HttpServletR ...

  4. 分享一些 Java 无关基础方面的书籍

    个人认为看书有两个点好处: 1. 能出版出来的书一定是经过反复思考,雕琢和审核的,因此从专业性的角度来说,一本好书的价值超其他资料 2. 对着书上的代码自己敲的时候方便 “看完书之后再次提升自我的最好 ...

  5. 分享我对JS插件开发的一些感想和心得

    本文阅读目录: •起因•如何开发一个轻量级的适用性强的插件•总结 起因 如果大家平时做过一些前端开发方面的工作,一定会有这样的体会:页面需要某种效果或者插件的时候,我们一般会有两种选择: 1.上网查找 ...

  6. CCF2016093炉石传说（C语言版）

    问题描述 <炉石传说:魔兽英雄传>(Hearthstone: Heroes of Warcraft,简称炉石传说)是暴雪娱乐开发的一款集换式卡牌游戏(如下图所示).游戏在一个战斗棋盘上进行 ...

  7. bzoj1208splay模板题

    想试下新找的板子,没想到交上去CE了..懒得调..以后有机会就改 /* 用type标记当前树上的是宠物还是人 每次求前驱后缀,删掉最近的那个点 */ #include<iostream> ...

  8. Linux系统上安装docker + Compose并创建WordPress

    安装docker可参考我的另一篇文章 安装Compose Docker Compose 是 Docker 官方编排(Orchestration)项目之一, 负责快速在集群中部署分布式应用. 方法一 1 ...

  9. python 全栈开发，Day23(复习,isinstance和issubclass,反射)

    一.复习 class A: def func1(self):pass def func2(self): pass def func3(self): pass a = A() b = A() print ...

  10. 数据库中的null用法