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

時間 2019-11-09

標籤 react 開發教程事件系統欄目 React 简体版

原文原文鏈接

事件系統

Virtual DOM在內存中是以對象的形式存在的，若是想要在這些對象上添加事件的話，React是基於Virtual DOM實現了一個合成事件層，他徹底符合w3c標準，不存在ie的兼容問題。而且擁有和瀏覽器原生事件同樣的接口，支持冒泡，可使用stopPropagation()和preventDefault()來中斷它。好吧不要想太多記住就是和瀏覽器事件同樣，處了調用形式react

合成事件的綁定方式

簡單的很segmentfault

//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後調用，此時咱們就能夠完成原生事件的綁定。好比：this

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>
        )
    }
}