react開發教程（七）React事件系統

太陽發表於2017-08-10
React事件

事件系統

Virtual DOM在記憶體中是以物件的形式存在的，如果想要在這些物件上新增事件的話，React是基於Virtual DOM實現了一個合成事件層，他完全符合w3c標準，不存在ie的相容問題。並且擁有和瀏覽器原生事件一樣的介面，支援冒泡，可以使用stopPropagation()和preventDefault()來中斷它。好吧不要想太多記住就是和瀏覽器事件一樣，處了呼叫形式

合成事件的繫結方式

簡單的很

//jsx：
<button onClick={this.handleClick}>按鈕</button>
//瀏覽器原生：
<button onclick="handleClick()">按鈕</button>

react只是借鑑DOM0級事件的這種寫法

繫結方法

在react元件中，每個方法的上下文都會指向該元件的例項，即自動繫結this為當前元件。而且React還會對這種引用進行快取，以達到CPU和記憶體的最優化。在使用ES6 class或者純粹函式時，這種繫結就不復存在了，我們需要手動實現this繫結

bind方法

這個方法可以幫助我們繫結事件處理器內的this，並且可以向事件處理器中傳遞引數

import React, { Component } form `react`;

class App extends Component {
    handleClick (e, arg) {
        console.log(e, arg)
    }
    render () {
        return (
            <button onClick={this.handleClick.bind(this,`test`)}>按鈕</button>
        )
    }
}

構造器內宣告

在元件的構造器內完成了this的繫結，這種繫結方式的好處在於僅需要進行一次繫結，而不需要每次呼叫事件監聽器時去執行繫結操作。

import React, { Component } form `react`;

class App extends Component {
    constructor () {
        super();
        this.handleClick = this.handleClick.bind(this,arg);
    }
    handleClick (e, arg) {
        console.log(e, arg)
    }
    render () {
        return (
            <button onClick={this.handleClick(this,`test`)}>按鈕</button>
        )
    }
}

箭頭函式

箭頭函式不僅是函式的語法糖，它還自動繫結定義此函式作用域的this，因此我們不需要對它使用bind方法。

import React, { Component } form `react`;

class App extends Component {
    constructor () {
        super();
        this.handleClick = (e, arg) => {
          console.log(e, arg)
        }
    }
 
    render () {
        return (
            <button onClick={this.handleClick(this,`test`)}>按鈕</button>
        )
    }
}

React中使用原生事件

React中提供了很好的合成事件系統，但有時候也需要用到原生事件。在React生命週期中提供了componentDidMount會在元件已經完成安裝並且在瀏覽器中存在真實的DOM後呼叫，此時我們就可以完成原生事件的繫結。比如：

import React, { Component } form `react`;

class App extends Component {
    constructor () {
        super();
    }
    
    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">按鈕</button>
        )
    }
}

一定要注意在React中使用原生DOM事件時，一定要在元件解除安裝時手動移除，否則很可能出現記憶體洩漏的問題。2而使用合成事件系統時則不需要，因為React內部以及處理了。

事件型別

鍵盤事件

onKeyDown
onKeyPress
onKeyUp

焦點事件

onFocus
onBlur

表單事件

onChange
onInput
onSubmit

滑鼠事件

onClick
onContextMenu
onDoubleClick
onMouseDown
onMouseUp
onMouseOver
onMouseOut
onMouseMove
onMouseEnter
onMouseLeave
onDrag

選擇事件

onSelect

觸控事件

onTouchCancel
onTouchEnd
onTouchMove
onTouchStart

UI事件

onScroll

動畫事件

onAnimationStart
onAnimationEnd
onAnimationIteration

影像事件

onLoad
onError

媒體事件

onPause
onPlay
onCanPlay
onLoadStart
onProgress

剪貼簿事件

onCopy
onCut
onPaste

上一篇：react開發教程（六）React與DOM

相關文章