关于React的事件机制简单解释

Posted 2021-09-13 白昼

对于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要自己定义事件呢？

最主要的原因还是因为不同浏览器具有差异 为了抹平不同浏览器之间的差异 使之拥有好的兼容性
对于原生浏览器的事件来说 如果有很多个事件监听 那么就需要分配很多的事件对象，造成内存的浪费，而合成事件有一个叫做事件池的东西专门来管理这些时间的创建和销毁，当事件被需要，就从池子中拿出来复用，事件回调结束，我就销毁你上面的所有属性，方便下次的复用