Event Handler —-React事宜

React中的事宜包含合成事宜和原生事宜，React底层对合成事宜举行事宜委派和手动绑定，原生事宜的运用在高程3有细致解说，难点在于跨浏览器兼容和DOM0/DOM2级事宜处置惩罚顺序的运用要领差别，这能够经由历程编写东西函数屏障浏览器差别，关于原生事宜的形貌在《Event Handler 事宜处置惩罚顺序 1》和《Event Handler 事宜处置惩罚顺序 2》中有细致诠释。

合成事宜：事宜委派

React不会把事宜处置惩罚函数直接绑定到实在的节点上，而是把一切事宜绑定到最外层，运用一个一致的事宜监听器，这个事宜监听器上保持了一个映照来保留一切组件内部的事宜监听和函数。当组件挂载或许卸载时，只是在这个一致的事宜监听器上插进去或许删除一些对象；当事宜发作时，起首被这个一致的事宜监听器处置惩罚，然后在映照里找到真正的事宜处置惩罚函数并挪用。这简化了事宜处置惩罚和接纳机制，效力也有很大提拔。

合成事宜：手动绑定

运用class或许纯函数建立组件时，this不会自动绑定，须要手动绑定：
1）bind要领，能够通报参数；
//在button上绑定事宜处置惩罚函数，类似于DOM0级事宜绑定

    return <button onClick = {this.handleClick.bind(this,’test’)}> Test </button>

2）在class的组织函数constructor内部完成this绑定，仅须要一次绑定；

    this.handleClick = this.handleClick.bind(this);

这是我现在经常使用的要领，平常在super(props)背面。

3）在组件内部建立时刻经由历程箭头函数建立事宜处置惩罚顺序以完成绑定，由于箭头函数自动绑定了定义此函数作用域的this，不须要再运用bind要领。

    class App extends Component{
        const handle(e) = (e) =>{console.log(e);};
        render(){
        return <button onClick = {this.handleClick}> Test </button>;
        }
    }

在React中运用原生事宜

在React中运用原生事宜DOM2级事宜：addEventListener()和removeEventListener()。为何运用原生事宜？由于有些时刻须要将事宜绑定在组件的父级元素上。在React中平常在componentDidMount以后挪用原生事宜，这时候DOM节点已肯定。肯定要在组件卸载时（componentWillUnmount）手动消除绑定，不然内存就会泄漏。合成事宜体系不须要如许，React已妥善处置惩罚了这一点（怎样处置惩罚的？）。

对照React事宜和JavaScript原生事宜（DOM2级事宜）

JavaScript原生事宜流传有事宜捕捉、事宜冒泡两个前后的历程，分别是由外到内和由内到外，事宜捕捉并非一个通用的手艺，在低于IE9版本的浏览器中没法运用。而且IE浏览器的事宜处置惩罚机制和其他浏览器差别，经由历程原生JavaScript完成的通用事宜处置惩罚顺序中平常运用if else语句对浏览器差别性举行屏障。React的合成事宜完成中，仅仅对最外层容器举行绑定，而且依靠事宜冒泡完成事宜委派，防止了事宜捕捉的浏览器不兼容特征。

最好防止同时运用原生事宜和合成事宜，混用时由于合成事宜机制将事宜绑定在了最外层，对内层组件上的事宜处置惩罚函数运用e.preventDefault()没法阻挠事宜默许操纵，由于事宜不知道本身绑定在内部组件上。最好的要领是不混用合成事宜和原生事宜，或许混用时经由历程在if语句中运用e.target推断事宜的直接绑定元素是否是内部组件。