React從入門到項目--第三天（事件處理 & React的生命週期）

事件處理

React允許開發人員爲虛擬DOM添加事件處理操作，而後在render之後就會將事件綁定到真實的DOM上。而不同的是，虛擬DOM上的事件與原生的事件的寫法是不一樣的，如原生的onclick而在React中要使用onClick。而事件綁定的屬性值爲一個自定義事件函數函數名，會在render的時候自行調用。

<button onClick={this.showInput}>提示輸入</button>

<input onBlur={this.handleBlur} type="text" placeholder="失去焦點提示內容"/>

而事件函數只需要額外寫出即可，但是有一個問題所在，即事件沒有this，直接打印的this爲undefined，需要在constructor中爲函數指定this爲組件對象。

constructor(props){
    super(props);
    this.showInput = this.showInput.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
}

下面給出我的完整代碼，分別定義了showInput和handleBlur兩個事件，再點擊提示框時和失去焦點時觸發。並分別爲函數綁定了this並賦值給原來的函數，完整代碼如下：

//1.定義組件
class MyTips extends React.Component{
    constructor(props){
        super(props);
        this.showInput = this.showInput.bind(this);
        this.handleBlur = this.handleBlur.bind(this);
    }
    showInput(){
        alert(this.input.value)
    }
    handleBlur(event){
        alert(event.target.value)
    }
    render(){
        return(
            <div>
                <input type="text" ref={(input)=>this.input = input} />
                <button onClick={this.showInput}>提示輸入</button>
                <input onBlur={this.handleBlur} type="text" placeholder="失去焦點提示內容"/>
            </div>
        )
    }
}
//2.渲染組件標籤
ReactDOM.render(<MyTips/>,document.getElementById('demo'));

React的生命週期

與vue一樣，React也有自己的生命週期，即該組件從開始創建直至死亡，在各個階段，均有自己的生命週期的鉤子函數，會在特定的時期，調用對應的鉤子函數實現特定的功能。比如在組件初始化的時候去請求服務器數據進行展示，在組件銷燬的時候清除定時器等操作。

1、組件初始化

在組建初始化時，會先後調用componentWillMount ，componentDidMount 和componentWillReceiveProps ，分別在渲染之前，第一次渲染後和接收新的prop時。

componentWillMount 在渲染前調用,在客戶端也在服務端。

componentDidMount 在第一次渲染後調用，只在客戶端。之後組件已經生成了對應的DOM結構，可以通過this.getDOMNode()來進行訪問。

componentWillReceiveProps 在組件接收到一個新的 prop (更新後)時被調用。這個方法在初始化render時不會被調用。

2、組件更新

在組件進行更新時都會調用一次，比如props或state進行數據的更新時都會去調用一次render方法，同時相關的生命週期的鉤子函數（shouldComponentUpdate ，componentWillUpdate和componentDidUpdate ）也會相應的被調用。

shouldComponentUpdate 返回一個布爾值。在組件接收到新的props或者state時被調用。在初始化時或者使用forceUpdate時不被調用。 可以在你確認不需要更新組件時使用。

componentWillUpdate在組件接收到新的props或者state但還沒有render時被調用。在初始化時不會被調用。

componentDidUpdate 在組件完成更新後立即調用。在初始化時不會被調用。

3、組件銷燬

componentWillUnmount在組件從 DOM 中移除之前立刻被調用。

class Button extends React.Component {
    componentWillMount() {
        console.log('Component WILL MOUNT!')
    }
    componentDidMount() {
        console.log('Component DID MOUNT!')
    }
    componentWillReceiveProps(newProps) {
        console.log('Component WILL RECEIVE PROPS!')
    }
    componentWillUpdate(nextProps, nextState) {
        console.log('Component WILL UPDATE!');
    }
    componentDidUpdate(prevProps, prevState) {
        console.log('Component DID UPDATE!')
    }
    componentWillUnmount() {
        console.log('Component WILL UNMOUNT!')
    }
    render() {
        return (
            <div>
                <h3 onClick={this.setState({myNumber:this.props.myNumber++})}>{this.props.myNumber}</h3>
            </div>
        );
    }
}
ReactDOM.render(<Button />,document.getElementById('example'));