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 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 (
          
) } } // method 2 // 采用箭头函数,ES6中的箭头函数能自动绑定this // handleClick = (event) => { ... }

为什么react要统一事件

react提出统一事件处理的目的主要是:

  1. 浏览器兼容性
  2. 改善性能
    在复杂的UI系统中,越多的事件处理意味着应用需要消耗的内存越多。手动解决这个问题并不是很麻烦,但是在冗长的过程中,你需要尝试去给在来源于同一个父节点的事件进行分组。很难权衡。而React就帮我们解决了这个问题。
    React不是直接的将事件挂在dom上,它在document的根部用一个事件处理去监听和调用相应的事件。

参考:

https://www.kirupa.com/react/...

你可能感兴趣的:(event,react.js,frontend)