成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

淺析React之事件系統(tǒng)(一)

chemzqm / 1278人閱讀

摘要:合成事件的使用方式在中不會(huì)把所有的事件處理器綁定到相應(yīng)的真實(shí)的節(jié)點(diǎn)上,而是使用一個(gè)統(tǒng)一的事件監(jiān)聽(tīng)器,把所有的事件綁定在最外層。在之前開(kāi)發(fā)者需要為了優(yōu)化性能需要自己來(lái)優(yōu)化自己的事件處理器的代碼,現(xiàn)在幫助你完成了這些工作。

大家周末好,2016年的最后幾篇文章開(kāi)始寫(xiě)到了React的一些東西,那么最近就來(lái)一些圖表君對(duì)于React的簡(jiǎn)單總結(jié)和理解,那么今天就開(kāi)始第一篇,說(shuō)一說(shuō)React的事件系統(tǒng)。

總覽

簡(jiǎn)單來(lái)說(shuō)React實(shí)現(xiàn)了一個(gè)SyntheticEvent層,所有定義的事件處理器都可以接受到一個(gè)SyntheticEvent對(duì)象的實(shí)例,他是一個(gè)跨瀏覽器的對(duì)于原生事件的包裝,和原生事件一樣有同樣的接口,包括stopPropagation()和preventDefault()。

合成事件的使用方式

在React中不會(huì)把所有的事件處理器綁定到相應(yīng)的真實(shí)的DOM節(jié)點(diǎn)上,而是使用一個(gè)統(tǒng)一的事件監(jiān)聽(tīng)器,把所有的事件綁定在最外層。當(dāng)事件發(fā)生的時(shí)候,首先被這個(gè)統(tǒng)一的事件監(jiān)聽(tīng)器處理,隨后找到真正的事件處理函數(shù)進(jìn)行調(diào)用,這樣是為了提高效率,這是因?yàn)樵赨I系統(tǒng)中,事件處理器越多,那么占據(jù)的內(nèi)存就越大,React的做法是將其簡(jiǎn)化為一個(gè),這樣就大大提高了效率。在之前開(kāi)發(fā)者需要為了優(yōu)化性能需要自己來(lái)優(yōu)化自己的事件處理器的代碼,現(xiàn)在React幫助你完成了這些工作。

合成事件的綁定方式

說(shuō)了這么許多理論上的知識(shí),我們來(lái)看看合成事件是怎么使用的。

bind方法。

我們來(lái)直接看代碼

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

構(gòu)造器內(nèi)聲明

再來(lái)看代碼

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

使用構(gòu)造器內(nèi)聲明的方法,僅僅要綁定一次而不需要每次使用的時(shí)候都綁定一次。

箭頭函數(shù)

class ButtonApp extends React.Component {

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

從上邊的使用方式我們可以看出React來(lái)使用合成事假還是很簡(jiǎn)單的,但是現(xiàn)實(shí)的世界總是更加的復(fù)雜的。那么在React中我們可以使用原始事件嗎?當(dāng)然是可以的。

使用原生事件

在React中我們也可以使用原生事件,那么如何進(jìn)行綁定呢,因?yàn)镽eact提供了ComponentDidMount這樣的API讓我們可以調(diào)用,那么要使用原生事件我們就可以在DidMount后進(jìn)行綁定。例如上邊的那個(gè)例子中如果我們想把click事件綁定在原生button上該怎么做呢?我們來(lái)看代碼:

class ButtonApp extends React.Component {
    
    componentDidMount(){
        this.refs.button.addEventListener("click"  e => {
            console.log(e);
        })
    }
    
    componentWillUnmount(){
        this.refs.button.removeEventListener("click")
    }

    render(){
        return 
    }

}

在這里例子中我們使用原生事件的方法綁到了button上,注意一點(diǎn)的是在DidMount上add了這個(gè)listener在willUnmont上remove這個(gè)listener。一定要手動(dòng)的記住移除,不然可能會(huì)出現(xiàn)內(nèi)存泄漏問(wèn)題。如果我們使用React合成事件,這些事React已經(jīng)幫你做好了。但是現(xiàn)實(shí)的情況下我們有一些場(chǎng)景是不得不用到原生的事件的那么該怎么做呢?

我們來(lái)看下邊的一個(gè)例子。例如我們要實(shí)現(xiàn)這樣的一個(gè)功能,在頁(yè)面上有個(gè)button,當(dāng)點(diǎn)擊它會(huì)出現(xiàn)一個(gè)圖片。當(dāng)點(diǎn)擊頁(yè)面的其他部分的時(shí)候,這個(gè)圖片會(huì)自動(dòng)的消失,那么這樣的需求我們就不得不使用原生的事件了。話(huà)不多說(shuō)我們來(lái)看代碼實(shí)現(xiàn)。

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

上邊一個(gè)例子中,我們實(shí)現(xiàn)了組件APP,他里邊有一個(gè)button,它上邊有一個(gè)handleClick的事件處理器,當(dāng)觸發(fā)時(shí)會(huì)把a(bǔ)pp的state里show制成true,這樣圖片就顯示了出來(lái)。同時(shí)在body上使用了原生事件,當(dāng)發(fā)生點(diǎn)擊事件的時(shí)候,就會(huì)被收起,這樣就簡(jiǎn)單實(shí)現(xiàn)了需求的功能,那是看似這樣好像就沒(méi)有問(wèn)題的,但是這其中有個(gè)bug,到底是什么問(wèn)題呢,我們下篇文章繼續(xù)??纯丛录秃铣墒录煊玫哪切┦?。

參考文獻(xiàn):
深入react技術(shù)棧

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/81410.html

相關(guān)文章

  • 淺析React事件系統(tǒng)(二)

    摘要:因?yàn)樽柚故录芭莸男袨橹荒苡糜诤铣墒录?,沒(méi)法阻止原生事件的冒泡。同時(shí)的創(chuàng)建和冒泡是在原生事件冒泡到最頂層的之后的。淺析之事件系統(tǒng)一 上篇文章中,我們談到了React事件系統(tǒng)的實(shí)現(xiàn)方式,和在React中使用原生事件的方法,那么這篇文章我們來(lái)繼續(xù)分析下,看看React中合成事件和原生事件混用的各種情況。 上一個(gè)例子 在上篇文章中,我們舉了個(gè)例子。為了防止大家不記得,我們來(lái)看看那個(gè)例子的代...

    villainhr 評(píng)論0 收藏0
  • 淺析 web 前端 MVVM

    摘要:它由微軟架構(gòu)師和開(kāi)發(fā),通過(guò)利用微軟圖形系統(tǒng)和的互聯(lián)網(wǎng)應(yīng)用派生品的特性來(lái)簡(jiǎn)化用戶(hù)界面的事件驅(qū)動(dòng)程序設(shè)計(jì)。微軟的和架構(gòu)師之一于年在他的博客上發(fā)表了。更改時(shí)會(huì)得到提醒這個(gè)情況是一個(gè)單向流。 前言 記得四個(gè)月前有一次面試,面試官問(wèn)我 MVVM 是什么,MVVM 的本質(zhì)是什么。我大腦一片混亂,那時(shí)我對(duì) MVVM 的認(rèn)知就只是雙向綁定和Vue,以這個(gè)關(guān)鍵字簡(jiǎn)單回答了幾句,我反問(wèn) MVVM 的本質(zhì)是...

    VincentFF 評(píng)論0 收藏0
  • react路由淺析

    摘要:瀏覽器端使用的和集成使用時(shí)會(huì)用到中路由分類(lèi)基于提供的和事件來(lái)保持和的同步。路由剖析在上面的示例中是轉(zhuǎn)發(fā)的樞紐在這個(gè)中轉(zhuǎn)站有很多線(xiàn)路通過(guò)開(kāi)關(guān)可以啟動(dòng)列車(chē)的運(yùn)行乘坐列車(chē)就可以發(fā)現(xiàn)新大陸。 引言 在使用react做復(fù)雜的spa開(kāi)發(fā)中,開(kāi)發(fā)中必不可少的就是react-router,它使用Lerna管理多個(gè)倉(cāng)庫(kù), 在browser端常使用的幾個(gè)如下所示 react-router 提供了路由的...

    jackzou 評(píng)論0 收藏0
  • 最近遇到的前端面試題(2017.03.08更新版)

    摘要:通過(guò)管理組件通信通過(guò)驅(qū)動(dòng)視圖比較差異進(jìn)行更新操作作者第七頁(yè)鏈接來(lái)源知乎著作權(quán)歸作者所有,轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。達(dá)到無(wú)刷新的效果。對(duì)象的狀態(tài)不受外界影響。對(duì)象代表一個(gè)異步操作,有三種狀態(tài)進(jìn)行中已完成,又稱(chēng)和已失敗。 以下問(wèn)題解釋非本人原創(chuàng),是根據(jù)面試經(jīng)驗(yàn)整理后覺(jué)得更容易理解的解釋版本,歡迎補(bǔ)充。 一. 輸入url后的加載過(guò)程 從輸入 URL 到頁(yè)面加載完成的過(guò)程中都發(fā)生了什么 計(jì)算機(jī)...

    linkFly 評(píng)論0 收藏0
  • 最近遇到的前端面試題(2017.03.08更新版)

    摘要:通過(guò)管理組件通信通過(guò)驅(qū)動(dòng)視圖比較差異進(jìn)行更新操作作者第七頁(yè)鏈接來(lái)源知乎著作權(quán)歸作者所有,轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。達(dá)到無(wú)刷新的效果。對(duì)象的狀態(tài)不受外界影響。對(duì)象代表一個(gè)異步操作,有三種狀態(tài)進(jìn)行中已完成,又稱(chēng)和已失敗。 以下問(wèn)題解釋非本人原創(chuàng),是根據(jù)面試經(jīng)驗(yàn)整理后覺(jué)得更容易理解的解釋版本,歡迎補(bǔ)充。 一. 輸入url后的加載過(guò)程 從輸入 URL 到頁(yè)面加載完成的過(guò)程中都發(fā)生了什么 計(jì)算機(jī)...

    Nosee 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<