淺析React之事件系統（一）

chemzqm 發布于2019-08-20 14:05 / 1271人閱讀

摘要：合成事件的使用方式在中不會把所有的事件處理器綁定到相應的真實的節點上，而是使用一個統一的事件監聽器，把所有的事件綁定在最外層。在之前開發者需要為了優化性能需要自己來優化自己的事件處理器的代碼，現在幫助你完成了這些工作。

大家周末好，2016年的最后幾篇文章開始寫到了React的一些東西，那么最近就來一些圖表君對于React的簡單總結和理解，那么今天就開始第一篇，說一說React的事件系統。

總覽

簡單來說React實現了一個SyntheticEvent層，所有定義的事件處理器都可以接受到一個SyntheticEvent對象的實例，他是一個跨瀏覽器的對于原生事件的包裝，和原生事件一樣有同樣的接口，包括stopPropagation()和preventDefault()。

合成事件的使用方式

在React中不會把所有的事件處理器綁定到相應的真實的DOM節點上，而是使用一個統一的事件監聽器，把所有的事件綁定在最外層。當事件發生的時候，首先被這個統一的事件監聽器處理，隨后找到真正的事件處理函數進行調用，這樣是為了提高效率，這是因為在UI系統中，事件處理器越多，那么占據的內存就越大，React的做法是將其簡化為一個，這樣就大大提高了效率。在之前開發者需要為了優化性能需要自己來優化自己的事件處理器的代碼，現在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 
    }
        
}

構造器內聲明

再來看代碼

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

使用構造器內聲明的方法，僅僅要綁定一次而不需要每次使用的時候都綁定一次。

箭頭函數

class ButtonApp extends React.Component {

    handleClick (e) {
        console.log(e.target.value)
      }
 
     render(){
        return ;
          }
    }

從上邊的使用方式我們可以看出React來使用合成事假還是很簡單的，但是現實的世界總是更加的復雜的。那么在React中我們可以使用原始事件嗎？當然是可以的。

使用原生事件

在React中我們也可以使用原生事件，那么如何進行綁定呢，因為React提供了ComponentDidMount這樣的API讓我們可以調用，那么要使用原生事件我們就可以在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上，注意一點的是在DidMount上add了這個listener在willUnmont上remove這個listener。一定要手動的記住移除，不然可能會出現內存泄漏問題。如果我們使用React合成事件，這些事React已經幫你做好了。但是現實的情況下我們有一些場景是不得不用到原生的事件的那么該怎么做呢？

我們來看下邊的一個例子。例如我們要實現這樣的一個功能，在頁面上有個button，當點擊它會出現一個圖片。當點擊頁面的其他部分的時候，這個圖片會自動的消失，那么這樣的需求我們就不得不使用原生的事件了。話不多說我們來看代碼實現。

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 (
      
        
          
            
          
      
    )
  }
}
ReactDOM.render(, document.getElementById("root"));

Open In CodePen

上邊一個例子中，我們實現了組件APP，他里邊有一個button，它上邊有一個handleClick的事件處理器，當觸發時會把app的state里show制成true，這樣圖片就顯示了出來。同時在body上使用了原生事件，當發生點擊事件的時候，就會被收起，這樣就簡單實現了需求的功能，那是看似這樣好像就沒有問題的，但是這其中有個bug，到底是什么問題呢，我們下篇文章繼續。看看原生事件和合成事件混用的那些事。

參考文獻：
深入react技術棧

云服務器 GPU云服務器然之開源系統源碼淺析 linux系統之centos7系統重啟查 cdn淺析

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

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

淺析React之事件系統（二）

摘要：因為阻止事件冒泡的行為只能用于合成事件中，沒法阻止原生事件的冒泡。同時的創建和冒泡是在原生事件冒泡到最頂層的之后的。淺析之事件系統一上篇文章中，我們談到了React事件系統的實現方式，和在React中使用原生事件的方法，那么這篇文章我們來繼續分析下，看看React中合成事件和原生事件混用的各種情況。上一個例子在上篇文章中，我們舉了個例子。為了防止大家不記得，我們來看看那個例子的代...

villainhr 2019-08-20 14:05 評論0 收藏0
淺析 web 前端 MVVM

摘要：它由微軟架構師和開發，通過利用微軟圖形系統和的互聯網應用派生品的特性來簡化用戶界面的事件驅動程序設計。微軟的和架構師之一于年在他的博客上發表了。更改時會得到提醒這個情況是一個單向流。前言記得四個月前有一次面試，面試官問我 MVVM 是什么，MVVM 的本質是什么。我大腦一片混亂，那時我對 MVVM 的認知就只是雙向綁定和Vue，以這個關鍵字簡單回答了幾句，我反問 MVVM 的本質是...

VincentFF 2019-08-23 14:35 評論0 收藏0
react路由淺析

摘要：瀏覽器端使用的和集成使用時會用到中路由分類基于提供的和事件來保持和的同步。路由剖析在上面的示例中是轉發的樞紐在這個中轉站有很多線路通過開關可以啟動列車的運行乘坐列車就可以發現新大陸。引言在使用react做復雜的spa開發中,開發中必不可少的就是react-router,它使用Lerna管理多個倉庫, 在browser端常使用的幾個如下所示 react-router 提供了路由的...

jackzou 2019-08-22 16:12 評論0 收藏0
最近遇到的前端面試題(2017.03.08更新版)

摘要：通過管理組件通信通過驅動視圖比較差異進行更新操作作者第七頁鏈接來源知乎著作權歸作者所有，轉載請聯系作者獲得授權。達到無刷新的效果。對象的狀態不受外界影響。對象代表一個異步操作，有三種狀態進行中已完成，又稱和已失敗。以下問題解釋非本人原創，是根據面試經驗整理后覺得更容易理解的解釋版本，歡迎補充。一. 輸入url后的加載過程從輸入 URL 到頁面加載完成的過程中都發生了什么計算機...

linkFly 2019-08-21 11:35 評論0 收藏0
最近遇到的前端面試題(2017.03.08更新版)

摘要：通過管理組件通信通過驅動視圖比較差異進行更新操作作者第七頁鏈接來源知乎著作權歸作者所有，轉載請聯系作者獲得授權。達到無刷新的效果。對象的狀態不受外界影響。對象代表一個異步操作，有三種狀態進行中已完成，又稱和已失敗。以下問題解釋非本人原創，是根據面試經驗整理后覺得更容易理解的解釋版本，歡迎補充。一. 輸入url后的加載過程從輸入 URL 到頁面加載完成的過程中都發生了什么計算機...

Nosee 2019-08-30 15:53 評論0 收藏0