React
基于浏览器的事件机制自身实现了一套事件机制,包括事件注册、事件的合成、事件冒泡、事件派发等
在React
中这套事件机制被称之为合成事件
合成事件是 React
模拟原生 DOM
事件所有能力的一个事件对象,即浏览器原生事件的跨浏览器包装器
根据 W3C
规范来定义合成事件,兼容所有浏览器,拥有与浏览器原生事件相同的接口,例如:
const button =
如果想要获得原生DOM
事件,可以通过e.nativeEvent
属性获取
const handleClick = (e) => console.log(e.nativeEvent);;
const button =
从上面可以看到React
事件和原生事件也非常的相似,但也有一定的区别:
// 原生事件绑定方式
// React 合成事件绑定方式
const button =
// 原生事件 事件处理函数写法
// React 合成事件 事件处理函数写法
const button =
虽然onclick
看似绑定到DOM
元素上,但实际并不会把事件代理函数直接绑定到真实的节点上,而是把所有的事件绑定到结构的最外层,使用一个统一的事件去监听
这个事件监听器上维持了一个映射来保存所有组件内部的事件监听和处理函数。当组件挂载或卸载时,只是在这个统一的事件监听器上插入或删除一些对象
当事件发生时,首先被这个统一的事件监听器处理,然后在映射里找到真正的事件处理函数并调用。这样做简化了事件处理和回收机制,效率也有很大提升
关于React
合成事件与原生事件执行顺序,可以看看下面一个例子:
import React from 'react';
class App extends React.Component{
constructor(props) {
super(props);
this.parentRef = React.createRef();
this.childRef = React.createRef();
}
componentDidMount() {
console.log("React componentDidMount!");
this.parentRef.current?.addEventListener("click", () => {
console.log("原生事件:父元素 DOM 事件监听!");
});
this.childRef.current?.addEventListener("click", () => {
console.log("原生事件:子元素 DOM 事件监听!");
});
document.addEventListener("click", (e) => {
console.log("原生事件:document DOM 事件监听!");
});
}
parentClickFun = () => {
console.log("React 事件:父元素事件监听!");
};
childClickFun = () => {
console.log("React 事件:子元素事件监听!");
};
render() {
return (
分析事件执行顺序
);
}
}
export default App;
输出顺序为:
原生事件:子元素 DOM 事件监听!
原生事件:父元素 DOM 事件监听!
React 事件:子元素事件监听!
React 事件:父元素事件监听!
原生事件:document DOM 事件监听!
可以得出以下结论:
所以想要阻止不同时间段的冒泡行为,对应使用不同的方法,对应如下:
阻止合成事件间的冒泡,用e.stopPropagation()
阻止合成事件与最外层 document 上的事件间的冒泡,用e.nativeEvent.stopImmediatePropagation()
阻止合成事件与除最外层document上的原生事件上的冒泡,通过判断e.target来避免
document.body.addEventListener('click', e => {
if (e.target && e.target.matches('div.code')) {
return;
}
this.setState({ active: false, }); });
}
React
事件机制总结如下:
在react
应用中,事件名都是用小驼峰格式进行书写,例如onclick
要改写成onClick
最简单的事件绑定如下:
class ShowAlert extends React.Component {
showAlert() {
console.log("Hi");
}
render() {
return ;
}
}
从上面可以看到,事件绑定的方法需要使用{}
包住
上述的代码看似没有问题,但是当将处理函数输出代码换成console.log(this)
的时候,点击按钮,则会发现控制台输出undefined
为了解决上面正确输出this
的问题,常见的绑定方式有如下:
如果使用一个类组件,在其中给某个组件/元素一个onClick
属性,它现在并会自定绑定其this
到当前组件,解决这个问题的方法是在事件函数后使用.bind(this)
将this
绑定到当前组件中
class App extends React.Component {
handleClick() {
console.log('this > ', this);
}
render() {
return (
test
)
}
}
这种方式在组件每次render
渲染的时候,都会重新进行bind
的操作,影响性能
通过ES6
的上下文来将this
的指向绑定给当前组件,同样再每一次render
的时候都会生成新的方法,影响性能
class App extends React.Component {
handleClick() {
console.log('this > ', this);
}
render() {
return (
this.handleClick(e)}>test
)
}
}
在constructor
中预先bind
当前组件,可以避免在render
操作中重复绑定
class App extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('this > ', this);
}
render() {
return (
test
)
}
}
跟上述方式三一样,能够避免在render
操作中重复绑定,实现也非常的简单,如下:
class App extends React.Component {
constructor(props) {
super(props);
}
handleClick = () => {
console.log('this > ', this);
}
render() {
return (
test
)
}
}
上述四种方法的方式,区别主要如下:
综合上述,方式四是最优的事件绑定方式