大家周末好，2016年的最后幾篇文章開始寫到了React的一些東西，那么最近就來一些圖表君對于React的簡單總結(jié)和理解，那么今天就開始第一篇，說一說React的事件系統(tǒng)。
總覽
簡單來說React實現(xiàn)了一個SyntheticEvent層，所有定義的事件處理器都可以接受到一個SyntheticEvent對象的實例，他是一個跨瀏覽器的對于原生事件的包裝，和原生事件一樣有同樣的接口，包括stopPropagation()和preventDefault()。
合成事件的使用方式
在React中不會把所有的事件處理器綁定到相應(yīng)的真實的DOM節(jié)點上，而是使用一個統(tǒng)一的事件監(jiān)聽器，把所有的事件綁定在最外層。當(dāng)事件發(fā)生的時候，首先被這個統(tǒng)一的事件監(jiān)聽器處理，隨后找到真正的事件處理函數(shù)進行調(diào)用，這樣是為了提高效率，這是因為在UI系統(tǒng)中，事件處理器越多，那么占據(jù)的內(nèi)存就越大，React的做法是將其簡化為一個，這樣就大大提高了效率。在之前開發(fā)者需要為了優(yōu)化性能需要自己來優(yōu)化自己的事件處理器的代碼，現(xiàn)在React幫助你完成了這些工作。
合成事件的綁定方式
說了這么許多理論上的知識，我們來看看合成事件是怎么使用的。
-
bind方法。
我們來直接看代碼
import React, {Component} from 'react';
class EventApp extends Component {
handleClick(e,args){
console.log('this is the react event',e)
console.log('this is the args', args)
}
render(){
return <button onClick={this.handleClick.bind(this,'test')}>Test</button>
}
}
-
構(gòu)造器內(nèi)聲明
再來看代碼
import React, {Component} from 'react';
class EventApp extends Component {
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(e){
console.log('this is the react event',e)
}
render(){
return <button onClick={this.handleClick}>Test</button>
}
}
使用構(gòu)造器內(nèi)聲明的方法，僅僅要綁定一次而不需要每次使用的時候都綁定一次。
- 箭頭函數(shù)
class ButtonApp extends React.Component {
handleClick (e) {
console.log(e.target.value)
}
render(){
return <button onClick={(e) => this.handleClick(e)}>Test</button>;
}
}
從上邊的使用方式我們可以看出React來使用合成事假還是很簡單的，但是現(xiàn)實的世界總是更加的復(fù)雜的。那么在React中我們可以使用原始事件嗎？當(dāng)然是可以的。
使用原生事件
在React中我們也可以使用原生事件，那么如何進行綁定呢，因為React提供了ComponentDidMount這樣的API讓我們可以調(diào)用，那么要使用原生事件我們就可以在DidMount后進行綁定。例如上邊的那個例子中如果我們想把click事件綁定在原生button上該怎么做呢？我們來看代碼：
class ButtonApp extends React.Component {
componentDidMount(){
this.refs.button.addEventListener('click' e => {
console.log(e);
})
}
componentWillUnmount(){
this.refs.button.removeEventListener('click')
}
render(){
return <button ref="button">Test</button>
}
}
在這里例子中我們使用原生事件的方法綁到了button上，注意一點的是在DidMount上add了這個listener在willUnmont上remove這個listener。一定要手動的記住移除，不然可能會出現(xiàn)內(nèi)存泄漏問題。如果我們使用React合成事件，這些事React已經(jīng)幫你做好了。但是現(xiàn)實的情況下我們有一些場景是不得不用到原生的事件的那么該怎么做呢？
我們來看下邊的一個例子。例如我們要實現(xiàn)這樣的一個功能，在頁面上有個button，當(dāng)點擊它會出現(xiàn)一個圖片。當(dāng)點擊頁面的其他部分的時候，這個圖片會自動的消失，那么這樣的需求我們就不得不使用原生的事件了。話不多說我們來看代碼實現(xiàn)。
import React from 'react';
class App extends React.Component {
constructor(props){
super(props);
this.state = {
show: false
}
this.handleClick = this.handleClick.bind(this)
this.handleClickImage = this.handleClickImage.bind(this);
}
handleClick(){
this.setState({
show: true
})
}
componentDidMount(){
document.body.addEventListener('click', e=> {
this.setState({
show: false
})
})
}
componentWillUnmount(){
document.body.removeEventListener('click');
}
render(){
return (
<div className="container">
<button onClick={this.handleClick}>Open Image</button>
<div className="img-container" style={{ display: this.state.show ? 'block': 'none'}} >
</div>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'));
上邊一個例子中，我們實現(xiàn)了組件APP，他里邊有一個button，它上邊有一個handleClick的事件處理器，當(dāng)觸發(fā)時會把app的state里show制成true，這樣圖片就顯示了出來。同時在body上使用了原生事件，當(dāng)發(fā)生點擊事件的時候，就會被收起，這樣就簡單實現(xiàn)了需求的功能，那是看似這樣好像就沒有問題的，但是這其中有個bug，到底是什么問題呢，我們下篇文章繼續(xù)?？纯丛录秃铣墒录煊玫哪切┦?。
參考文獻：
深入react技術(shù)棧
