React Event的只知其一;不知其二

事件屬性

在DOM世界裏每一個事件有本身的類型。例如鼠標事件MouseEvent，經過這個事件能夠得到鼠標的信息包括狀態和鼠標位置， 每一個鍵盤相關的事件爲KeyboardEvent，該事件對象幫助咱們找到操做的鍵位key

Synthetic 事件

在react中，像onClick這樣的事件都不是直接的操做DOM事件，而是react統一用一個特點的事件類型SyntheticEvent.用戶並不能直接得到native的事件參數，得到的是由Synthetic事件對原生瀏覽器事件封裝過的參數。
每個Synthetic事件包含的屬性：

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
DOMEventTarget target
number timeStamp
string type

Synthetic提供了和原生DOM相同的事件函數。可是不是全部的DOM事件都存在react中，使用時能夠查閱Synthetic 文檔

監聽真實DOM

若是想用Synthetic支持以外的事件須要在React的生命週期中掛載和卸載事件
採用的是原生的 window.addEventListener
好像第三方事件如jquery的一些事件監聽也是在componentDidMount中添加

class Something extends React.Component{
    ...
    handleMyEvent(e){
     // do something
    }
    componentDidMount(){
        window.addEventListener("someEvent", this.handleMyEvent);
    }
    componentWillUnMount(){
        window.removeEventListener("someEvent", this.handleMyEvent);
    }
    render() {
        ... 
    }
    
}

小提示 關於寫法

在react組件中須要手動的bind當前的this對象，不然在事件調用上不能找到當前的this

// method 1
class MyComponent extends React.Component{
    constructor(props){
        super(props);
        this.state = ...
        // 手動bind this
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
        ...
    }
    render(){
        return (
          <div>
              <button onClick={this.handleClick}>Click my</button>
          </div>
        )
    }
}
// method 2
// 採用箭頭函數，ES6中的箭頭函數能自動綁定this
// handleClick = (event) => { ... }

爲何react要統一事件

react提出統一事件處理的目的主要是：

1. 瀏覽器兼容性
2. 改善性能
   在複雜的UI系統中，越多的事件處理意味着應用須要消耗的內存越多。手動解決這個問題並非很麻煩，可是在冗長的過程當中，你須要嘗試去給在來源於同一個父節點的事件進行分組。很難權衡。而React就幫咱們解決了這個問題。
   React不是直接的將事件掛在dom上，它在document的根部用一個事件處理去監聽和調用相應的事件。

參考：

https://www.kirupa.com/react/...