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

3次阅读

共计 1190 个字符，预计需要花费 3 分钟才能阅读完成。

对于 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>)

}

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

正文完