React事件

hearaway 發布于2019-08-20 14:27 / 701人閱讀

摘要：在中使用原生事件在中使用原生事件級事件和。的合成事件實現中，僅僅對最外層容器進行綁定，并且依賴事件冒泡完成事件委派，避免了事件捕獲的瀏覽器不兼容特性。

Event Handler ----React事件

React中的事件包括合成事件和原生事件，React底層對合成事件進行事件委派和手動綁定，原生事件的使用在高程3有具體講解，難點在于跨瀏覽器兼容和DOM0/DOM2級事件處理程序的使用方法不同，這可以通過編寫工具函數屏蔽瀏覽器差異，關于原生事件的描述在《Event Handler 事件處理程序 1》和《Event Handler 事件處理程序 2》中有詳細解釋。

合成事件：事件委派

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

合成事件：手動綁定

使用class或者純函數創建組件時，this不會自動綁定，需要手動綁定：
1）bind方法，可以傳遞參數；
//在button上綁定事件處理函數，類似于DOM0級事件綁定

    return

2）在class的構造函數constructor內部完成this綁定，僅需要一次綁定；

    this.handleClick = this.handleClick.bind(this);

這是我目前常用的方法，一般在super(props)后面。

3）在組件內部創建時間通過箭頭函數創建事件處理程序以實現綁定，由于箭頭函數自動綁定了定義此函數作用域的this，不需要再使用bind方法。

    class App extends Component{
        const handle(e) = (e) =>{console.log(e);};
        render(){
        return ;
        }
    }

在React中使用原生事件

在React中使用原生事件DOM2級事件：addEventListener()和removeEventListener()。為什么使用原生事件？因為有些時候需要將事件綁定在組件的父級元素上。在React中一般在componentDidMount之后調用原生事件，這時DOM節點已經確定。一定要在組件卸載時（componentWillUnmount）手動解除綁定，不然內存就會泄露。合成事件系統不需要這樣，React已經妥善處理了這一點（怎么處理的？）。

對比React事件和JavaScript原生事件（DOM2級事件）

JavaScript原生事件傳播有事件捕獲、事件冒泡兩個先后的過程，分別是由外到內和由內到外，事件捕獲并不是一個通用的技術，在低于IE9版本的瀏覽器中無法使用。而且IE瀏覽器的事件處理機制和其他瀏覽器不同，通過原生JavaScript實現的通用事件處理程序中一般使用if else語句對瀏覽器差異性進行屏蔽。React的合成事件實現中，僅僅對最外層容器進行綁定，并且依賴事件冒泡完成事件委派，避免了事件捕獲的瀏覽器不兼容特性。

最好避免同時使用原生事件和合成事件，混用時由于合成事件機制將事件綁定在了最外層，對內層組件上的事件處理函數使用e.preventDefault()無法阻止事件默認操作，因為事件不知道自身綁定在內部組件上。最好的方法是不混用合成事件和原生事件，或者混用時通過在if語句中使用e.target判斷事件的直接綁定元素是不是內部組件。

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

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

5、React組件事件詳解

摘要：組件事件響應在構建虛擬的同時，還構建了自己的事件系統且所有事件對象和規范保持一致。的事件系統和瀏覽器事件系統相比，主要增加了兩個特性事件代理和事件自動綁定。 React組件事件響應 React在構建虛擬DOM的同時，還構建了自己的事件系統；且所有事件對象和W3C規范保持一致。 React的事件系統和瀏覽器事件系統相比，主要增加了兩個特性：事件代理、和事件自動綁定。 1、事件代理 ...

Ververica 2019-08-22 15:13 評論0 收藏0
【React深入】React事件機制

摘要：給注冊原生事件回調為統一的事件分發機制。根據元素唯一標識和事件類型從中取出回調函數返回帶有合成事件參數的回調函數總流程將上面的四個流程串聯起來。可見，回調函數是直接調用調用的，并沒有指定調用的組件，所以不進行手動綁定的情況下直接獲取到的是。關于React事件的疑問 1.為什么要手動綁定this 2.React事件和原生事件有什么區別 3.React事件和原生事件的執行順序，可以混...

philadelphia 2019-08-23 15:39 評論0 收藏0
談談React事件機制和未來(react-events)

摘要：另外第三方也可以通過的事件插件機制來合成自定義事件，盡管很少人這么做。抽象跨平臺事件機制。打算干預事件的分發。事件是的一個自定義事件，旨在規范化表單元素的變動事件。 showImg(https://segmentfault.com/img/remote/1460000019961124?w=713&h=307); 當我們在組件上設置事件處理器時，React并不會在該DOM元素上直接綁定...

TNFE 2019-08-26 10:32 評論0 收藏0
深入React知識點整理（一）

摘要：以我自己的理解，函數式編程就是以函數為中心，將大段過程拆成一個個函數，組合嵌套使用。越來越多的跡象表明，函數式編程已經不再是學術界的最愛，開始大踏步地在業界投入實用。也許繼面向對象編程之后，函數式編程會成為下一個編程的主流范式。使用React也滿一年了，從剛剛會使用到逐漸探究其底層實現，以便學習幾招奇技淫巧從而在自己的代碼中使用，寫出高效的代碼。下面整理一些知識點，算是React看書...

Gilbertat 2019-08-22 11:18 評論0 收藏0
react開發教程（七）React事件系統

摘要：按鈕中使用原生事件中提供了很好的合成事件系統，但有時候也需要用到原生事件。而使用合成事件系統時則不需要，因為內部以及處理了。事件類型鍵盤事件焦點事件表單事件鼠標事件選擇事件觸摸事件事件動畫事件圖像事件媒體事件剪貼板事件上一篇開發教程六與事件系統 Virtual DOM在內存中是以對象的形式存在的，如果想要在這些對象上添加事件的話，React是基于Virtual DOM實現了一個合成事...

walterrwu 2019-08-21 11:50 評論0 收藏0