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. 82.Android之MVP+Retrofit+RxJava实践小结

    转载:http://wuxiaolong.me/2016/06/12/mvpRetrofitRxjava/ 关于MVP.Retrofit.RxJava,之前已经分别做了分享,如果您还没有阅读过,可以猛 ...

  2. bzoj1078【SCOI2008】斜堆

    题意: 斜堆(skew heap)是一种常用的数据结构.它也是二叉树,且满足与二叉堆相同的堆性质:每个非根结点的值都比它父亲大.因此在整棵斜堆中,根的值最小.但斜堆不必是平衡的,每个结点的左右儿子的大 ...

  3. iOS 10.0适配之旅

    1.升级Xcode体验 升级到Xcode之后,调试程序好多东西都不是太适应 控制台莫名给你打印一堆不是太好理解的东西 之前使用 Alcatraz 下载的插件都不能用(如何使用Alcatraz) 打开麦 ...

  4. form表单序列化后的数据转json对象

    function formToJson(){ var data = $("#form").serialize(); data= decodeURIComponent(data,tr ...

  5. 认真研究一下Gradients css3(无聊笔记)(原)

    渐变(gradients)分为2种: 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 径向渐变(Radial Gradients)- 由它们的中心定义 红色框表示可重 ...

  6. git: 修改commiter 信息

    Committer: root root@localhost.localdomain 您的姓名和邮件地址基于登录名和主机名进行了自动设置.请检查它们正确 与否.您可以通过下面的命令对其进行明确地设置以 ...

  7. HAOI2017前

    NOIP后想换一个看起来比较高端的博客,于是尝试用github+hexo建站,地址大概是这样的,搞了一周左右.. 最终以失败告终,一是代码高亮有bug,二是数学公式有bug,三是博文没法快速搬迁QAQ ...

  8. DOM编程的性能问题

    用脚本进行DOM操作的代价很昂贵,它是富Web应用中最常见的性能瓶颈. 浏览器中的DOM:天生就慢 DOM(文档对象模型)是独立于语言的,但在浏览器中的接口是用JavaScript实现的.两个相互独立 ...

  9. 测试开发面试-java持续累积

    接口和抽象类的区别 对java线程的理解 对java并发的理解 webservice的特点,用webservice的原因 守护线程和非守护线程 单例的实现,单例并发 如何实现定义一个类,只实现接口的任 ...

  10. cygwin 安装完后不能进入think问题,网上99%都是错误的

    正确的做法是首次进入的时候,显示的是哪个用户名就修改哪个用户名 比如我的电脑是 默认显示的是think 那么就去修改think 为 root 并把unused 后的2个数字改成0 然后在home下新建 ...