React學習筆記-7-銷毀階段

本文轉載自查看原文 2016-11-26 17:46 5999 react/ React

銷毀階段可以使用的函數：
componentWillUnmount:在刪除組件之前進行清理操作，比如計時器和事件監聽器。因為這些函數都是開發者手動加上去的，react不知道，必須進行手動清理。

實例
第一種方式：在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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 React學習筆記-5-初始化階段介紹 Jmeter學習筆記7-擴展圖形監控 matlab學習筆記7-定時器 webservice系統學習筆記7-異常處理 PHP學習筆記：刪除與銷毀session openstack學習筆記7-網絡服務安裝與配置 Object C學習筆記7-字符串NSString之一 ROS學習筆記7-理解服務（services）和參數（parameter） Spring學習筆記--初始化和銷毀Bean React學習筆記