快捷導(dǎo)航

React事件處理超詳細(xì)介紹

更新時(shí)間：2022年09月30日 09:42:34 作者：月光曬了很涼快

這篇文章主要介紹了React事件處理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1. 事件綁定

React 元素的事件處理和 DOM 元素的很相似，但是有一點(diǎn)語(yǔ)法上的不同:

React 事件的命名采用小駝峰式，而不是純小寫(xiě)。

onClick => onChange

使用 JSX 語(yǔ)法時(shí)你需要傳入一個(gè)函數(shù)作為事件處理函數(shù)，而不是一個(gè)字符串。

onClick={this.fn} // 綁定實(shí)現(xiàn)方法一定要用 {函數(shù)或方法}；注意函數(shù)或方法不能用小括號(hào)

類(lèi)組件與函數(shù)組件綁定事件是差不多的，只是在類(lèi)組件中綁定事件函數(shù)的時(shí)候需要用到 this，代表指向當(dāng)前的類(lèi)的引用，在函數(shù)中不需要調(diào)用 this

1.1 函數(shù)組件

import React, { Component } from 'react'
// 函數(shù)組件中沒(méi)有this指向問(wèn)題
const App = () => {
  let num = 1
  const clickFn = () => {
    console.log(num++)
  }
  // const clickFn = () => () => {
  //   console.log(num++)
  // }
  return (
    <div>
      {/* 普通的值，它不具備響應(yīng)式，所以你修改數(shù)據(jù)后，視圖是不會(huì)更新的 */}
      <h3>App組件 -- {num}</h3>
      {/* 綁定點(diǎn)擊事件 */}
      {/* 一般情況下，綁定的實(shí)現(xiàn)方法是不會(huì)加小括號(hào)，如果要加小括號(hào)，則定義綁定方法時(shí)，一定要返回一函數(shù) */}
      <button onClick={clickFn}>++++</button>
      {/* <button onClick={clickFn()}>++++</button> */}
    </div>
  )
}
export default App

1.2 類(lèi)組件

import React, { Component } from 'react'
class App extends Component {
  num = 100
  todos = []
  // 建議使用箭頭函數(shù)定義成員屬性
  addNum = () => {
    // 同步修改成員屬性中的數(shù)據(jù)，但是視圖不更新
    this.num++
    // 類(lèi)組件中提供一個(gè)方法，可以強(qiáng)制讓視圖更新
    this.forceUpdate()
  }
  // react事件，在沒(méi)有寫(xiě)小括號(hào)的時(shí)候會(huì)主動(dòng)的把event對(duì)象傳給你
  onEnter = evt => {
    if (evt.keyCode === 13) {
      this.todos.push({
        id: Date.now(),
        title: evt.target.value.trim(),
        done: false
      })
      evt.target.value = ''
      // 通知視圖更新
      this.forceUpdate()
    }
  }
  render() {
    return (
      <div>
        <h3>{this.num}</h3>
        <ul>
          {this.todos.map(item => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
        {/* 
          類(lèi)組件中綁定方法，有this指向問(wèn)題
        */}
        <button onClick={this.addNum}>++++</button>
        <input type="text" onKeyUp={this.onEnter} />
      </div>
    )
  }
}
export default App

2. 合成事件

概述：

在原生 Dom 事件( html 中)，假如我們給 button 按鈕綁定點(diǎn)擊事件，是綁定在 button 上去的。而這種情況在 React 中，不會(huì)在 button 上綁定事件，React 會(huì)將 Dom 中的事件進(jìn)行收集，然后將事件委托到容器中（id=root，即掛載點(diǎn)）。

在 React16 及之前，React 將所有的事件都委托到 document 當(dāng)中去，而在 React17 及之后，React 將所有的事件都委托到掛載點(diǎn)中去了。

為什么出現(xiàn)這個(gè)技術(shù)？

性能優(yōu)化：使用事件代理統(tǒng)一接收原生事件的觸發(fā)，從而可以使得真實(shí) DOM 上不用綁定事件。React 挾持事件觸發(fā)可以知道用戶(hù)觸發(fā)了什么事件，是通過(guò)什么原生事件調(diào)用的真實(shí)事件。這樣可以通過(guò)對(duì)原生事件的優(yōu)先級(jí)定義進(jìn)而確定真實(shí)事件的優(yōu)先級(jí)，再進(jìn)而可以確定真實(shí)事件內(nèi)觸發(fā)的更新是什么優(yōu)先級(jí)，最終可以決定對(duì)應(yīng)的更新應(yīng)該在什么時(shí)機(jī)更新。
分層設(shè)計(jì)：解決跨平臺(tái)問(wèn)題，抹平瀏覽器差異和平臺(tái)差異。

3. 事件傳參的3種不同寫(xiě)法

import React, { Component } from 'react';
class App extends Component {
  // 在react中事件對(duì)象，它是通過(guò)事件參數(shù)傳給方法的
  // 參數(shù)空著，會(huì)默認(rèn)綁定事件
  fn = () => {
    console.log('fn')
  }
  // 又想傳參，又想觸發(fā)事件得這么寫(xiě)，evt會(huì)自動(dòng)映射過(guò)來(lái)，注意最后一個(gè)箭頭前只能是 evt 對(duì)象
  fn1 = num => evt => {
    console.log(num, evt);
  }
  // 這種寫(xiě)法是可以隨意變更 evt 對(duì)象傳參過(guò)來(lái)的位置
  fn2 = (num, evt) => {
    console.log(num, evt);
  }
  render() {
    return (
      <div>
        {/* onClick={ 注意：花括號(hào)里是函數(shù)的表達(dá)式，而不是函數(shù)的調(diào)用 } */}
        <button onClick={this.fn}>綁定點(diǎn)擊事件</button>
        <button onClick={this.fn1(100)}>綁定點(diǎn)擊事件</button>
        <button onClick={evt => this.fn2(200, evt)}>綁定點(diǎn)擊事件</button>
      </div>
    );
  }
}
export default App;

4. this 指向問(wèn)題

在JSX事件函數(shù)方法中的 this，默認(rèn)不會(huì)綁定 this 指向。如果你忘記綁定，當(dāng)你調(diào)用這方法的時(shí)候，this 的值為 undefined。所以使用時(shí)一定要綁定好 this 的指向。

this 指向針對(duì)的是類(lèi)組件，函數(shù)組件沒(méi)有 this 問(wèn)題，因?yàn)楹瘮?shù)沒(méi)有 this 。

利用 bind 函數(shù)綁定 this 指向：

import React, { Component } from 'react';
class App extends Component {
  num = 100
  // 類(lèi)的構(gòu)造函數(shù)，它只執(zhí)行1次，在初始化
  // constructor(props) {
  //   super(props);
  //   // 在構(gòu)建函數(shù)中統(tǒng)一的把事件方法this綁定好
  //   this.addNum = this.addNum.bind(this)
  // }
  // 在react事件綁定的類(lèi)組件中，默認(rèn)情況this指向會(huì)可能存在指向問(wèn)題  undefined
  // 在綁定事件中綁定this調(diào)用函數(shù)時(shí)的寫(xiě)法
  addNum(n = 1) {
    this.num += n
    this.forceUpdate()
  }
  // 構(gòu)造函數(shù)中綁定this調(diào)用函數(shù)時(shí)的寫(xiě)法，因?yàn)椴粋髦档谝粋€(gè)參數(shù)會(huì)
  // addNum(evt, n = 1) {
  //   this.num += n
  //   this.forceUpdate()
  // }
  render() {
    return (
      <div>
        <h3>{this.num}</h3>
        {/* 在此處可以使用bind來(lái)綁定this指向(this指向 App 實(shí)例),且還可以傳參數(shù) */}
        {/* 此方案在使用中，較多 */}
        {/* <button onClick={this.addNum.bind(this)}>累加</button> */}
        <button onClick={this.addNum.bind(this, 2)}>累加</button>
        {/* 如果你這樣寫(xiě)，又想this指向?qū)?，則一定要在構(gòu)造函數(shù)中，解決好this指向 */}
        {/* <button onClick={this.addNum}>累加</button> */}
      </div>
    );
  }
}
export default App;

注意：使用 bind 綁定 this 共有兩種方案，一種是調(diào)用函數(shù)時(shí)綁定，一種是在構(gòu)造函數(shù)中統(tǒng)一綁定。

利用箭頭函數(shù)解決 this 指向：

import React, { Component } from 'react';
class App extends Component {
  num = 100
  // 類(lèi)的構(gòu)造函數(shù)，它只執(zhí)行1次，在初始化
  // constructor(props) {
  //   super(props);
  //   // 在構(gòu)建函數(shù)中統(tǒng)一的把事件方法this綁定好
  //   this.addNum = this.addNum.bind(this)
  // }
  // 在react事件綁定的類(lèi)組件中，默認(rèn)情況this指向會(huì)可能存在指向問(wèn)題  undefined
  // 在綁定事件中綁定this調(diào)用函數(shù)時(shí)的寫(xiě)法
  addNum(n = 1) {
    this.num += n
    this.forceUpdate()
  }
  // 構(gòu)造函數(shù)中綁定this調(diào)用函數(shù)時(shí)的寫(xiě)法，因?yàn)椴粋髦档谝粋€(gè)參數(shù)會(huì)
  // addNum(evt, n = 1) {
  //   this.num += n
  //   this.forceUpdate()
  // }
  render() {
    return (
      <div>
        <h3>{this.num}</h3>
        {/* 在此處可以使用bind來(lái)綁定this指向(this指向 App 實(shí)例),且還可以傳參數(shù) */}
        {/* 此方案在使用中，較多 */}
        {/* <button onClick={this.addNum.bind(this)}>累加</button> */}
        <button onClick={this.addNum.bind(this, 2)}>累加</button>
        {/* 如果你這樣寫(xiě)，又想this指向?qū)?，則一定要在構(gòu)造函數(shù)中，解決好this指向 */}
        {/* <button onClick={this.addNum}>累加</button> */}
      </div>
    );
  }
}
export default App;