脚本宝典收集整理的这篇文章主要介绍了React Event的一知半解,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
事件属性
在DOM世界里每个事件有自己的类型。例如鼠标事件MouseEvent,通过这个事件可以获得鼠标的信息包括状态和鼠标位置, 每个键盘相关的事件为KeyboardEvent,该事件对象帮助我们找到操作的键位key
Synthetic 事件
在react中,像onClick这样的事件都不是直接的操作DOM事件,而是react统一用一个特色的事件类型SyntheticEvent.用户并不能直接获得native的事件参数,获得的是由Synthetic事件对原生浏览器事件封装过的参数。
每一个Synthetic事件包含的属性:
boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void PReventDefault()
boolean isDefaultPrevented()
void stopPropagation()
DOMEventTarget target
number timeStamp
string tyPE
Synthetic提供了和原生DOM相同的事件函数。但是不是所有的DOM事件都存在react中,使用时可以查阅Synthetic 文档
监听真实DOM
如果想用Synthetic支持之外的事件需要在React的生命周期中挂载和卸载事件
采用的是原生的 window.addEventListener
好像第三方事件如jquery的一些事件监听也是在componentDidmount中添加
class @H_512_95@Something extends React.Component{
...
handleMyEvent(e){
// do something
}
componentDidMount(){
window.addEventListener("someEvent", this.handleMyEvent);
}
componentWillUnMount(){
window.removeEventListener("someEvent", this.handleMyEvent);
}
render() {
...
}
}
小提示 关于写法
在react组件中需要手动的bind当前的this对象,否则在事件调用上不能找到当前的this
// method 1
class MyComponent extends React.Component{
constructor(props){
super(props);
this.state = ...
// 手动bind this
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
...
}
render(){
return (
<div>
<button onClick={this.handleClick}>Click my</button>
</div>
)
}
}
// method 2
// 采用箭头函数,ES6中的箭头函数能自动绑定this
// handleClick = (event) => { ... }
为什么react要统一事件
react提出统一事件处理的目的主要是:
- 浏览器兼容性
- 改善性能
在复杂的UI系统中,越多的事件处理意味着应用需要消耗的内存越多。手动解决这个问题并不是很麻烦,但是在冗长的过程中,你需要尝试去给在来源于同一个父节点的事件进行分组。很难权衡。而React就帮我们解决了这个问题。
React不是直接的将事件挂在dom上,它在document的根部用一个事件处理去监听和调用相应的事件。
参考:
以上是脚本宝典为你收集整理的React Event的一知半解全部内容,希望文章能够帮你解决React Event的一知半解所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。