React學習筆記-事件(三)

定義事件

React 元素的事件處理和 DOM 元素的很相似 但是有一點語法上的不同

React 事件的命名采用小駝峰式(camelCase)而不是純小寫 如點擊事件onClick

import React from 'react'

export default class learnEvent extends React.Component {

  // // 直接在類里面定義一個方法
  hello () {
    console.log('hello word')
  }

  render () {
    return (
      <div>
        {/* 直接在類里面定義一個方法 事件使用小駝峰*/}
        <button onClick={this.hello}>直接定義</button>
      </div>
    )
  }
}

this指向問題

import React from 'react'

export default class learnEvent extends React.Component {
  // word的執行上下文為Window 由于jsx經babel編譯后會開啟嚴格模式。
  //       所以this指向變為undefined
  word () {
    console.log(this)
  }

  render () {
    return (
      <div>
        <button onClick={this.word}>this指向</button>
      </div>
    )
  }
}

解決this指向問題-bind改變指向

import React from 'react'

export default class learnEvent extends React.Component {

  // 用bind改變this指向
  wordBind () {
    console.log(this)
  }

  render () {
    return (
      <div>
        {/* 使用bind將this指向改到render上 render的this又指向實例對象 call和apply會自動執行不能使用
            盡量使用es6語法 bind不推薦使用 */}
        <button onClick={this.wordBind.bind(this)}>binb改變指向</button>
      </div>
    )
  }
}

解決this指向問題-ES6箭頭函數

import React from 'react'

export default class learnEvent extends React.Component {

  // es6箭頭函數
  wordES6 = () => {
    console.log(this);
  }

  render () {
    return (
      <div>
        {/* 箭頭函數沒有this 里面的this是箭頭函數所處環境上下文this指向 在這里箭頭函數外this指向實例對象
            這種方法無法傳參 不推薦使用
            有性能影響 可以忽略不記 */}
        <button onClick={this.wordES6}>es6箭頭函數</button>
      </div>
    )
  }
}

獲取事件對象event

import React from 'react'

export default class learnEvent extends React.Component {

  // 獲取事件event對象
  helloEvent(event) {
    console.log(event)
  }

  render () {
    return (
      <div>
        {/* 獲取事件event對象 */}
        <button onClick={(event) => {this.helloEvent(event)}}>獲取事件event對象</button>
      </div>
    )
  }
}

合成事件

概念

React 合成事件(SyntheticEvent)是 React 模擬原生 DOM 事件所有能力的一個事件對象 即瀏覽器原生事件的跨瀏覽器包裝器 它根據 W3C 規范 來定義合成事件 兼容所有瀏覽器 擁有與瀏覽器原生事件相同的接口

// 這個onClick就是合成事件
<button onClick={xxx}>+1</button>

合成事件優勢

1. 進行瀏覽器兼容 實現更好的跨平臺

   • React 采用的是頂層事件代理機制 能夠保證冒泡一致性 可以跨瀏覽器執行 React 提供的合成事件用來抹平不同瀏覽器事件對象之間的差異 將不同平臺事件模擬合成事件

2. 避免垃圾回收

   • 事件對象可能會被頻繁創建和回收 因此 React 引入事件池 在事件池中獲取或釋放事件對象 即 React 事件對象不會被釋放掉 而是存放進一個數組中 當事件觸發 就從這個數組中彈出 避免頻繁地去創建和銷毀(垃圾回收)

3. 方便事件統一管理和事務機制

合成事件和原生事件區別

a. 事件命名方式

// 原生事件命名為純小寫(onclick, onblur) 而 React 事件命名采用小駝峰式(camelCase) 如 onClick 等

// 原生事件綁定方式
<button onclick="handleClick()">+1</button>
      
// React 合成事件綁定方式
const button = <button onClick={handleClick}>+1</button>

b. 事件處理函數寫法

// 原生事件中事件處理函數為字符串 在 React JSX 語法中 傳入一個函數作為事件處理函數

// 原生事件 事件處理函數寫法
<button onclick="handleClick()">+1</button>
      
// React 合成事件 事件處理函數寫法
const button = <button onClick={handleClick}>+1</button>

c. 阻止默認行為方式

// 在原生事件中，可以通過返回 false 方式來阻止默認行為 但是在 React 中 需要顯式使用 preventDefault() 方法來阻止

// 原生事件阻止默認行為方式
<a href="#" 
  onclick="console.log('阻止原生事件'); return false"
>
  阻止原生事件
</a>

// React 事件阻止默認行為方式
const handleClick = e => {
  e.preventDefault();
  console.log('阻止原生事件~');
}
const clickElement = <a href="#" onClick={handleClick}>
  阻止原生事件
</a>

React事件和原生事件執行順序

1. React 所有事件都掛載在 document 對象上
2. 當真實 DOM 元素觸發事件 會冒泡到 document 對象后 再處理 React 事件
3. 所以會先執行原生事件 然后處理 React 事件
4. 最后真正執行 document 上掛載的事件