关于react.js:关于React的事件机制简单解释

对于React来说 它领有与原生js事件不同的一套事件机制 叫做合成事件（SyntheticEvent）

const Text = ({list,handleClick}) => ({    list.map((item,index) => (        <span key={index} onClick=   {clickHandle}>{item}</span>)）})

看到这段代码肯定是感觉这个点击事件是绑定在每一个标签上 但对于react来说却并不是，jsx语法写的事件并不是绑定在对应的实在DOM中，而是通过事件代理的形式，将所有的事件都对立绑在了document上，用这种形式的益处在于缩小了内存耗费，在组件挂载销毁时对立订阅与移除事件，性能优化了很多

在原生js当中的一些事件是对React不起作用的 比方阻止冒泡 如果咱们想要在一些状况下不想要冒泡事件，应用event.stopPropagation是有效的 应该应用event.preventDefault

另外与原生事件不同的一些区别：
写法不同 合成事件是驼峰写法，而原生事件则是全副小写

<button onclick="clickHandle()">  test</button>

<button onClick="clickHandle()">  test</button>

与原生js事件的执行程序
componentDidMount() {

this.parent.addEventListener('click', (e) => {  console.log('dom parent');})this.child.addEventListener('click', (e) => {  console.log('dom child');})document.addEventListener('click', (e) => {  console.log('document');})

}

childClick = (e) => {

console.log('react child');

}

parentClick = (e) => {

console.log('react parent');

}

render() {

return (  <div onClick={this.parentClick} ref={ref => this.parent = ref}>    <div onClick={this.childClick} ref={ref => this.child = ref}>      test    </div>  </div>)

}

为什么React要本人定义事件呢？

最次要的起因还是因为不同浏览器具备差别 为了抹平不同浏览器之间的差别 使之领有好的兼容性
对于原生浏览器的事件来说 如果有很多个事件监听 那么就须要调配很多的事件对象，造成内存的节约，而合成事件有一个叫做事件池的货色专门来治理这些工夫的创立和销毁，当事件被须要，就从池子中拿进去复用，事件回调完结，我就销毁你下面的所有属性，不便下次的复用