淺談React事件機制

MyFaith 發布于2019-08-23 18:36 / 564人閱讀

摘要：事件簡介事件是合成事件，所有事件都自動綁定到最外層上。支持事件的冒泡機制，我們可以使用和來中斷它。這樣做簡化了事件處理和回收機制，效率也有很大提升。事件類型合成事件的事件類型是原生事件類型的一個子集。

React事件簡介

React事件是合成事件，所有事件都自動綁定到最外層上。因為Virtual DOM 在內存中是以對象的形式存在的，所以React 基于 Virtual DOM 實現了一個 SyntheticEvent (合成事件)層，我們所定義的事件處理器會接收到一個 SyntheticEvent 對象的實例。支持事件的冒泡機制，我們可以使用 stopPropagation() 和 preventDefault() 來中斷它。沒有兼容問題。

事件綁定？

事件綁定的方式與原生事件綁定相似，但是必須使用駝峰的形式來書寫事件的屬性名(比如 onClick)；
React 并不會像 DOM0 級事件那樣將事件處理器直接綁定到 HTML 元素之上，而是一個函數指針：

button onclick="handleClick()">Test //dom0

合成事件的實現機制

在 React 底層，主要對合成事件做了兩件事:事件委派和自動綁定。

1.事件委派

React并不會把事件處理函數直接綁定到真實的節點上，而是把所有事件綁定到結構的最外層，使用一個統一的事件監聽器，這個事件監聽器上維持了一個映射來保存所有組件內部的事件監聽和處理函數。當組件掛載或卸載時，只是在這個統一的事件監聽器上插入或刪除一些對象;當事件發生時，首先被這個統一的事件監聽器處理，然后在映射里找到真正的事件處理函數并調用。這樣做簡化了事件處理和回收機制，效率也有很大提升。

2. 自動綁定

在 React 組件中，每個方法的上下文都會指向該組件的實例，即自動綁定this為當前組件。但是使用 ES6 classes 或者純函數時，需要手動實現this的綁定。具體有如下方法：

1》通過bind方法實現；每次重新渲染時，都會生成一個新的函數實例保存在listenerBank中，浪費內存

render() {
    // 通過bind方法實現，可以傳遞參數
    return ;
}
render() {//不傳遞參數時，也可以使用::代替
    return ;
}

2》構造器內使用bind綁定；不用每次調用都綁定。推薦

    import React, { Component } from "react";
    class App extends Component { constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this); }
        handleClick(e) { console.log(e);
    }
    render() {
        return ;
    } }

3》箭頭函數

class App extends Component { //不能帶參數
    const handleClick = (e) => {
       console.log(e);
    };
    render() {
        return ;
    } 
}

class App extends Component { //也是每次渲染都會生成新的函數實例
    handleClick(e) {
        console.log(e); 
    }
  render() {
    return  
    }
}

對比React合成事件與JavaScript原生事件

對于無法使用 React 合成事件的場景，我們還需要使用原生事件來完成。從 4 個方面來對比 React 合成事件與 JavaScript 原生事件。
1.事件傳播與阻止事件傳播
瀏覽器原生 DOM 事件的傳播可以分為 3 個階段:事件捕獲階段、目標對象本身的事件處理程序調用以及事件冒泡。將 e.addEventListener() 的第三個參數設置為 true 時，可以為事件注冊捕獲階段，但是ie9一下不支持，所以沒什么意義。react只提供了事件冒泡機制，通過e.prevent- Default() 即可。阻止原生事件傳播需要使用 e.preventDefault()，不過對于不支持該方法的瀏覽器(IE9 以下)，只能使用 e.cancelBubble = true 來阻止。
2.事件類型
React 合成事件的事件類型是 JavaScript 原生事件類型的一個子集。
3.事件綁定方式
受到 DOM 標準的影響，綁定瀏覽器原生事件的方式也有很多種，具體如下所示。
1》直接在 DOM 元素中綁定:

2》在 JavaScript 中，通過為元素的事件屬性賦值的方式實現綁定:

el.onclick = e => { console.log(e); }

3》通過事件監聽函數來實現綁定:

el.addEventListener("click", () => {}, false);
el.attachEvent("onclick", () => {});

相比而言，React 合成事件的綁定方式則簡單得多:

4.事件對象
原生 DOM 事件對象在 W3C 標準和 IE 標準下存在著差異。在低版本的 IE 瀏覽器中，只能
使用 window.event 來獲取事件對象。而在 React 合成事件系統中，不存在這種兼容性問題，在事
件處理函數中可以得到一個合成事件對象。

云服務器 GPU云服務器事件機制事件冒泡機制事件注冊機制 extjs 事件機制

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105526.html

淺談React事件機制

摘要：事件簡介事件是合成事件，所有事件都自動綁定到最外層上。支持事件的冒泡機制，我們可以使用和來中斷它。這樣做簡化了事件處理和回收機制，效率也有很大提升。事件類型合成事件的事件類型是原生事件類型的一個子集。 React事件簡介 React事件是合成事件，所有事件都自動綁定到最外層上。因為Virtual DOM 在內存中是以對象的形式存在的，所以React 基于 Virtual DOM 實現了...

moven_j 2019-08-02 15:29 評論0 收藏0
淺談React Fiber

摘要：因為版本將真正廢棄這三生命周期到目前為止，的渲染機制遵循同步渲染首次渲染，更新時更新時卸載時期間每個周期函數各司其職，輸入輸出都是可預測，一路下來很順暢。通過進一步觀察可以發現，預廢棄的三個生命周期函數都發生在虛擬的構建期間，也就是之前。 showImg(https://segmentfault.com/img/bVbweoj?w=559&h=300); 背景前段時間準備前端招聘事項...

izhuhaodev 2019-08-26 10:43 評論0 收藏0
2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

LiuRhoRamen 2019-08-30 14:11 評論0 收藏0
2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

stormgens 2019-08-22 15:34 評論0 收藏0
2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

Hujiawei 2019-08-01 18:43 評論0 收藏0