React筆記-事件(三)
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>
合成事件優勢
進行瀏覽器兼容 實現更好的跨平臺
- React 采用的是頂層事件代理機制 能夠保證冒泡一致性 可以跨瀏覽器執行 React 提供的合成事件用來抹平不同瀏覽器事件對象之間的差異 將不同平臺事件模擬合成事件
避免垃圾回收
- 事件對象可能會被頻繁創建和回收 因此 React 引入事件池 在事件池中獲取或釋放事件對象 即 React 事件對象不會被釋放掉 而是存放進一個數組中 當事件觸發 就從這個數組中彈出 避免頻繁地去創建和銷毀(垃圾回收)
方便事件統一管理和事務機制
合成事件和原生事件區別
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事件和原生事件執行順序
- React 所有事件都掛載在 document 對象上
- 當真實 DOM 元素觸發事件 會冒泡到 document 對象后 再處理 React 事件
- 所以會先執行原生事件 然后處理 React 事件
- 最后真正執行 document 上掛載的事件
浙公網安備 33010602011771號