《深刻react技術棧》學習筆記（三）漫談React

前言

接下來讓咱們進入新的章節：漫談React。
本篇文章主要講React事件系統和表單操做。

正文

一：事件系統

1.react的事件系統
react事件系統符合W3school標準，不存在任何IE兼容性問題，而且與原生的瀏覽器事件同樣有一樣的API接口。一樣支持事件的冒泡機制，咱們可使用stopPropagation()和preventDefault()來終止它。
全部的事件都自動綁定到最外層。若是須要訪問原生事件對象，可使用nativeEvent屬性。

2.合成事件
（1）事件委派
react把全部事件綁定到結構的最外層，使用一個贊成的事件監聽器，這個事件監聽器上維持了一個映射來保存全部組件內部的事件監聽和處理函數。
（2）自動綁定
在react組件中，每一個方法的上下文都會指向該組件的實例，即自動綁定this爲當前組件。可是在使用ES6 classes或者純函數時這種自動綁定就不復存在，須要手動實現this的綁定。
（3）綁定方法
3-1：bind方法：能夠幫助咱們綁定事件處理完器內的this，而且能夠向事件處理器中傳入參數，好比：

import React,{Component} from 'react'
class App extends Component{
    handleClick(e,arg){
        console.log(e,log);
    }
    render(){
        return <button onClick={this.handleClick.bind(this,'test')}>Test</button>;
    }
}

3-2構造器內聲明（推薦）：在組件的構造器內完成對事件的綁定。

class App extends Component{
    handleClick(e){
        console.log(e);
        this.handleClick=this.handleClick.bind(this);
    }
    render(){
            return <button onClick={this.handleClick.bind(this,'test')}>Test</button>;
        }
}

3-3箭頭函數:它自動綁定了定義此函數做用域的this。

class App extends Component{
   const handleClick= (e)=>{
        console.log(e);
    }
    render(){
            return <button onClick={this.handleClick.bind(this,'test')}>Test</button>;
        }
}或
import React,{Component} from 'react'
class App extends Component{
    handleClick(e,arg){
        console.log(e,log);
    }
    render(){
        return <button onClick={()=>this.handleClick()}>Test</button>;
    }
}

3.原生事件
componenDidMount會在組件已經完成安裝而且在瀏覽器存在真實的 DOM後調用，此時咱們就能夠完成對原生事件的綁定。

import React,{Component} from 'react'
class nativeEventDemo extends Component{
    componentDidMount(){
        this.refs.button.addEventListener('click',e=>{
            handleClick(e);
        })
    }
    handleClick(e){
        console.log(e);
    }
    componentWillUnmount(){
        this.refs.button.removeEventListener('click');
    }
    render(){
        return <button ref = 'button'>Test</button>
    }
}

注意：在react中使用DOM原生事件時，必定要在組件卸載時手動移除，不然可能出現內存泄漏問題。

4.混合事件

咱們沒法在組件中將事件綁定到組件範圍以外的區域，只能使用原生事件來實現。

可是，儘可能在React中混用合成事件和原生DOM事件：用reactEvent.nativeEvent.stopPropagatoin()來阻止事件冒泡是不行的。組織React事件冒泡的行爲只適用於React合成系統中，且沒辦法阻止原生事件冒泡。反之，在原生事件中阻止事件冒泡，卻能夠阻止React事件的傳播。

對於沒法使用React的合成事件系統的場景，咱們還須要使用原生事件來完成。

二：表單