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

为什么react要统一事件

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

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

参考：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!