組件的生命週期(運行階段和銷燬階段)以及事件處理函數

1.組件的生命週期

接着(2)中的組件生命週期

1.運行階段

運行階段有5個步驟：

1. componentWillReceiveProps: 父組件修改屬性觸發，能夠修改新屬性，修改狀態。
2. shouldComponentUpdate: 組件是否更新，返回布爾值，默認值爲true，表示更新；返回false會阻止render調用，render後面的函數都不會執行。
3. componentWillUpdate: 不能修改屬性與狀態，用於日誌打印與數據獲取。
4. render：只能訪問this.props與this.state，只有一個頂層標籤，不容許修改狀態和DOM輸出。
5. componentDidUpdate：能夠修改DOM。

componentWillReceiveProps有一個參數：newProps
其他四個有兩個參數：newProps,newState

//demo1
<div id="demo1"></div>
<script type="text/babel">
    var HelloReact = React.createClass({
            // 組件將要接收新的屬性
            componentWillReceiveProps:function(newProps){
                console.log('componnetWillReceiveProps',1);
                console.log(newProps);
            },
            // 是否容許組件更新，返回true或者false，通常不會改變它的默認值：true
            shouldComponentUpdate:function(newProps,newState){
                console.log('shouldComponentUpdate',2);
                console.log(newProps,newState);
                return true;
            },
            // 組件將要更新
            componentWillUpdate:function(){
                console.log('componentWillUpdate',3);
            },
            render:function(){
                console.log('render',4);
                return <p>Hello {this.props.name?this.props.name:'React'}</p>;
            },
            // 組件更新完畢
            componentDidUpdate:function(){
                console.log('componentDidUpdate',5);
            }
        })
        var Demo = React.createClass({
            getInitialState:function(){
                return {
                    name:''
                };
            },
            handleChange:function(e){
                this.setState({
                    name:e.target.value
                });
            },
            render:function(){ 
                return(
                    <div>
                        <HelloReact name={this.state.name}/>
                        {/*傳的是狀態，到子組件變成了屬性*/}
                        <input type="text" onChange={this.handleChange} />
                    </div>
                )
            }
        })
        ReactDOM.render(<Demo/>,document.getElementById("demo1"));
</script>
複製代碼

效果圖： 初始:

輸入內容時：

在第二步shouldComponentUpdate中若是返回 false，會阻止後面的代碼

shouldComponentUpdate(newProps,newState){
    return false;
複製代碼

結果：

2.銷燬階段

1. componentWillUnmount: 組件將要卸載
   銷燬階段有兩種方式
   1. 利用input的輸入內容來卸載組件，ReactDOM中提供一個方法unmountComponentAtNode()，參數是節點對象。
   2. 經過判斷state的狀態來卸載組件

在原來的例子中擴展

//demo1
<div id="demo2"></div>
<script type="text/babel">
    var HelloReact = React.createClass({
            componentWillReceiveProps:function(newProps){
                console.log('componnetWillReceiveProps',1);
            },
            shouldComponentUpdate:function(newProps,newState){
                console.log('shouldComponentUpdate',2);
                return true;
            },
            componentWillUpdate:function(){
                console.log('componentWillUpdate',3);
            },
            render:function(){
                console.log('render',4);
                return <p>Hello {this.props.name?this.props.name:'React'}</p>;
            },
            componentDidUpdate:function(){
                console.log('componentDidUpdate',5);
            },
            
            //銷燬階段
            componentWillUnmount:function(){
                console.log('BOOOOOOOOOOOOOOOOOM');
            }
        })
        var Demo = React.createClass({
            getInitialState:function(){
                return {
                    name:''
                };
            },
            handleChange:function(e){
            //方法1：
                if(e.target.value =="1234"){
                    ReactDOM.unmountComponentAtNode(document.getElementById("demo2"));
                    return;
                };
                this.setState({
                    name:e.target.value
                });
            },
            render:function(){ 
            //方法2：
                if(this.state.name="1234"){
                    return <div>1234</div>
                };
                return(
                    <div>
                        <HelloReact name={this.state.name}/>
                        <input type="text" onChange={this.handleChange} />
                    </div>
                )
            }
        })
        ReactDOM.render(<Demo />, document.getElementById("demo2"));
</script>
複製代碼

使用方法一，輸入"1234"的效果圖：

使用方法二，當輸入"1234"時的效果圖：

---

2.事件處理

1.編寫事件處理函數

自定義組件：駝峯命名
在函數體中進行一些操做，常見的有：更新頁面內容，更新組件狀態，與後臺交互。

書寫方式：

var Demo = React.createClass({
	getInitialState:function(){		},
	handleClick: function(event){		},
	handleChange: function(){		},
	render:function(){		},
})
複製代碼

2.綁定事件處理函數

onClick={this,handleClick}

須要注意的是：不要在事件後面添加上一個() 其餘的事件： 觸摸事件：onTouchCancel，onTouchEnd，onTouchMove，onTouchStart

鍵盤事件：onKeyDown，onKeyUp， onKeyPress（前二者的組合）

表單時間：onChange，onInput，onSubmit

焦點事件：onFocus，onBlur

UI元素事件：onScroll

滾動事件：onWhell（鼠標滾動）

鼠標事件：onClick，onContextMenu，onDoubleClick…...

3.事件對象

1.通用：全部的事件都有的事件屬性，例如：

a：target 獲取節點  
b: timeStame 獲取時間戳  
c: type 獲取事件類型  
d：nativeEvent 瀏覽器的默認事件 
e: preventDefault 阻止默認行爲  
f: stopPropagation 組織冒泡
g: bubbles 事件是否能夠冒泡
h: cancelable 事件能否能夠取消
......
複製代碼

<div id="demo3"></div>
    <script type="text/babel">
        var Demo = React.createClass({
            handleClick:function(e){
                console.log(e);
                console.log(e.target);
                console.log(e.nativeEvent);
                console.log(e.cancelable);
                console.log(e.type);
                console.log(e.bubbles);
                console.log(e.stopPropagation);
            },
            render:function(){
                return <div onClick={this.handleClick}>Hello World</div>;
            }
        })
        ReactDOM.render(<Demo/>,document.getElementById('demo3'))
    </script>
複製代碼

點擊後的效果圖：

事件與狀態關聯：

inputChange(event){
		this.setState({
			inputText:event.target.value
		});
	}

複製代碼

事件處理函數例子

<div id="demo4"></div>
    <script type="text/babel">
        var Demo = React.createClass({
            getInitialState(){
                return {
                    width: 200,
                    height: 200,
                    backgroundColor: '#ff6666'
                };
            },
            randomColor(){
                var r = Math.floor(Math.random()*256);
                var g = Math.floor(Math.random()*256);
                var b = Math.floor(Math.random()*256);
                return 'rgb('+r+','+g+','+b+')';
            },
            handleWheel(){
                this.setState({
                    backgroundColor:this.randomColor()
                });
            },
            render(){
                return <div onWheel={this.handleWheel} style={this.state}>這是一個案例，鼠標滾動實現背景顏色的變化</div>;
            }
        });
        ReactDOM.render(<Demo/>,document.getElementById('demo4'))
    </script>
複製代碼

效果圖:

滾動滑輪時，顏色隨機改變