當(dāng)前位置：首頁 > 运维知识 > windows >内容正文

windows

React 中事件处理

發(fā)布時(shí)間：2023/11/29 windows 72 coder

生活随笔收集整理的這篇文章主要介紹了 React 中事件处理小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

不要問自己需要什么樣的人生，而要問自己想要成為什么樣的人。

我們從前面的學(xué)習(xí)知道一個(gè) React 組件不僅僅只包含 DOM 結(jié)構(gòu)的，還應(yīng)該樣式和 Javascript 邏輯的。這里我們認(rèn)識(shí)邏輯構(gòu)造之事件處理。

1. React 事件處理

這里列舉了在 React 中事件的幾種綁定處理方式：

import React, { Component } from "react";

class App extends Component {
  render () {
    return (
      <div>
        <input/>
        <button onClick={ ()=>{ console.log("第一種事件綁定處理方式") }}>Add-1</button>
        <button onClick={ this.handleClick2 }>Add-2</button>
        <button onClick={ this.handleClick3 }>Add-3</button>
        <button onClick={ ()=>{ this.handleClick4() } }>Add-4</button>
      </div>
    )
  }

  handleClick2() {
    console.log("第二種事件綁定處理方式")
  }

  handleClick3 = ()=>{
    console.log("第三種事件綁定處理方式")
  }

  handleClick4 = ()=>{
    console.log("第四種事件綁定處理方式")
  }
}

export default App;

2. 事件綁定區(qū)別

這里重點(diǎn)說明下在事件和事件綁定綁定中 this 指向問題。

2.1 匿名函數(shù)

直接執(zhí)行匿名函數(shù)，直接在 {} 中寫事件函數(shù)表達(dá)式。

寫法特點(diǎn)：

適合邏輯少、簡(jiǎn)單表達(dá)式。如果處理邏輯過多、復(fù)雜，會(huì)導(dǎo)致結(jié)構(gòu)不清晰，難維護(hù)，不推薦。
事件內(nèi)部 this 指向和外部一致，因?yàn)榧^函數(shù)沒有 this 指向問題原則。

能直接訪問：

因?yàn)?onClick 后面表達(dá)式跟的是一個(gè)函數(shù)（箭頭函數(shù)），這里事件內(nèi)部 this 指向和外部一致。

class App extends Component {
 // 定義屬性
 value = 100

 render () {
  return (
    <div>
      <input/>
      <button onClick={ ()=>{ console.log("第一種事件綁定處理方式", this.value) }}>Add-1</button>
    </div>
  )
}

2.2 調(diào)用內(nèi)部普通函數(shù)

寫法特點(diǎn)：this 指向和外部不一致，需要用 bind 修正 this 指向，不推薦使用。

<button onClick={ this.handleClick2 }>Add-2</button>
// 修正后：
<button onClick={ this.handleClick2.bind(this) }>Add-2</button>

handleClick2() {
  // 異常，需要通過改變 this 指向解決
  console.log("第二種事件綁定處理方式", this.value) 
}

不能直接訪問：

這里訪問類屬性 this.value 會(huì)報(bào)錯(cuò)，我們可以打印出 this 看下它指向什么，結(jié)果會(huì)是：undefined。為什么 this 會(huì)丟失呢？記住一句話：函數(shù)中的 this 誰調(diào)用我，this 就指向誰。這里點(diǎn)完按鈕后被 React 事件系統(tǒng)調(diào)用的，this 指向的應(yīng)該是 React 事件系統(tǒng)。用于不會(huì)指向 App 這個(gè)實(shí)例。而這里它也沒有指向 React 事件系統(tǒng)，而是丟了指向 undefined。哈哈哈....

2.3 調(diào)用內(nèi)部箭頭函數(shù)

寫法特點(diǎn)：this 指向和外部一直，沒有 this 指向問題，推薦使用。

<button onClick={ this.handleClick3 }>Add-3</button>

handleClick3 = ()=>{
  console.log("第三種事件綁定處理方式", this.value)
}

這里是箭頭函數(shù)，this 指向根本不關(guān)心誰調(diào)用的我，它永遠(yuǎn)保持與外部作用域一樣的，它指向的 app 的實(shí)例。為什么箭頭函數(shù) this 指向就不關(guān)心誰調(diào)用的我呢？我也不知道.... 難到....

箭頭函數(shù)會(huì)自動(dòng)改變 this 的指向？？？
或者箭頭函數(shù)不是改變 this 指向，而是引用上一個(gè)作用域的 this ？？？
一個(gè)比較權(quán)威的解釋是在箭頭函數(shù)中，this 與封閉詞法上下文的 this 保持一致。在全局代碼中，它將被設(shè)置為全局對(duì)象。

2.4 執(zhí)行匿名函數(shù)，調(diào)用其他內(nèi)部函數(shù)

寫法特點(diǎn)：this 指向和外部一直，沒有 this 指向問題，符合誰調(diào)用我我指向誰。非常推薦使用這種寫法，參數(shù)傳遞很方便。

<button onClick={ ()=>{ this.handleClick4() } }>Add-4</button>
// 語法簡(jiǎn)寫：
<button onClick={ ()=>this.handleClick4() }>Add-4</button>

// 有人說這里是因?yàn)槟銓懗闪思^函數(shù)了吧，即使他不寫成箭頭函數(shù)也沒關(guān)系，剛才講的原理，符合誰調(diào)用我我指向誰。
handleClick4 = ()=>{
  console.log("第四種事件綁定處理方式", this.value)
}

整體有個(gè)問題：要不要加小括號(hào)，不加不讓他自己主動(dòng)執(zhí)行，點(diǎn)擊系統(tǒng)會(huì)調(diào)用、加小括號(hào)執(zhí)行函數(shù)。加小闊號(hào)主動(dòng)執(zhí)行，點(diǎn)擊后不執(zhí)行 undefined。

2.5 JS 中修正 this 指向方案

call：改變 this 指向，自動(dòng)執(zhí)行函數(shù)；
apply：改變 this 指向，自動(dòng)執(zhí)行函數(shù)；
bind：改變 this 指向，不會(huì)自動(dòng)執(zhí)行函數(shù)，需要手動(dòng)加括號(hào)執(zhí)行函數(shù) ；

var obj1 = {
  name: "obj1",
  getName() {
    console.log(this.name)
  }
}

var obj2 = {
  name: "obj2",
  getName() {
    console.log(this.name)
  }
}

// this.name 誰調(diào)用我我指向誰
obj1.getName() // 結(jié)果 obj1
obj2.getName() // 結(jié)果 obj2

// call, reply ：修改 obj1 getName 中 this 指向 obj2
obj1.getName.call(obj2) // 結(jié)果 obj2
obj2.getName() // 結(jié)果 obj2

3. 總結(jié)事件處理

3.1 this 指向問題，記住兩句話

誰調(diào)用我我指向誰原則；
箭頭函數(shù)沒有 this 指向問題；

3.2 React 事件綁定和原生事件綁定有什么區(qū)別？

React 中事件綁定沒有綁定到具體的 DOM 節(jié)點(diǎn)（元素）身上。它采用的是一種事件代理的模式，綁定在根節(jié)點(diǎn)身上。綁定到每一個(gè) DOM 節(jié)點(diǎn)身上是很消耗內(nèi)存的。

React 模擬了一套事件冒泡機(jī)制，等冒泡到根節(jié)點(diǎn)上通過 target 事件源找到是那個(gè)元素真實(shí)觸發(fā)的，然后從這個(gè)觸發(fā)的元素到頂點(diǎn)所有節(jié)點(diǎn)都去查一查，有沒有一個(gè)叫 onClick 屬性，如果有就把這個(gè) onClick 事件給執(zhí)行了，完整模擬冒泡的流程，即模擬系統(tǒng)事件機(jī)制。其不需要考慮解綁、移除事件等，只有節(jié)點(diǎn)從頁面中沒了，onClick 根本就不會(huì)再有了，沒有綁定只有節(jié)點(diǎn)沒了 onClick 就沒了。

3.3 Event 事件對(duì)象也是支持的

Event 對(duì)象，和普通瀏覽器一樣，事件 handler 會(huì)被自動(dòng)傳入一個(gè) event 對(duì)象，這個(gè)對(duì)象和普通的瀏覽器 event 對(duì)象所包含的方法和屬性都基本一致。不同的是 React 中的 event 對(duì)象并不是瀏覽器提供的，而是它自己內(nèi)部所構(gòu)建的。它同樣具有 event . stoppropagation、event.preventDefault 這種常用的方法。

總結(jié)

以上是生活随笔為你收集整理的React 中事件处理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

事件
React