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

時間 2020-06-10

標籤 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

javascript

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。