react合成事件

React合成事件处理

React中的合成事件定义：
SyntheticEvent
合成事件是围绕着浏览器的原生事件，充当跨浏览器的包装对象，他们将不同浏览器的行为合并成为一个API,这样做的目的就是为了确保事件在不同的浏览器上显示一致的属性

<div.onXxx = {} onXxxCapture = {} />  这种在jsx元素上基于onXxx绑定的事件都算是合成事件 
通俗来讲 所谓的合成事件，就是React内部的操作  对这些事件进行特殊的处理

React18中的合成事件绑定的原理 （就是事件委托）

@1 在JSX视图编译的时候，当遇到某个元素上出现onXxx这种合成事件的绑定，其实并没有给元素做事件绑定，只是给这个元素设置了一个onXxx的私有的属性 属性值 就是我们绑定的方法，
@2 在React内部 会给#root容器，的点击行为，做事件绑定 （捕获和冒泡阶段都处理了） React所有的视图编译完，都会插入到root容器中 这样所有的点击 都会把#root的点击行为触发

root.addEventListener('click',function(ev){
//获取传播路径路径
//按照从外到内的顺序，把元素的 onXXXCapture 合成事件的私有属性，依次触发执行
}，true)
root.addEventListener('click',function(ev){
//获取传播路径
//按照从内到外的顺序，把元素的 onXXXCapture 合成事件的私有属性，依次触发执行
}，false)

在React内部 会默认对大部分浏览器，标准事件（前提是支持事件传播的）都做了这样的委托处理！

JSX视图的渲染合成事件

合成事件对象的阻止事件传播 能阻止合成事件的传播以及原生事件的传播

分为合成事件的阻止传播 以及原生事件的阻止传播
在JSX合成事件中的 ev.stopPropagation()  
在JSX合成事件中的 ev.nativestopPropagation()  

React没有 stopImmediatePropagation()

React16中的合成事件的处理机制和React18有很大的区别

@1 绑定的合成事件对于有传播机制的标准事件来讲，也不是做的合成事件绑定，onXxx/onXxxCapture 私有属性！！
@2 只不过React16不是给，#root做事件委托 而是委托给document，并且只是做了冒泡阶段委托

document.addEventLinstener('click',function(){
//获取传播路径
//处理合成事件对象
//把传播路径按照倒叙	依次执行  元素.onClickCapture()方法
//把传播路径按照正叙	依次执行  元素.onClickCapture()方法
}，false)

React16中 处理合成事件的处理机制不同，对于合成事件的处理，和reacat18也是不一样的，对于合成事件的处理 和React18是不一样的 在16的版本中 存在事件池机制 用的合成事件对象只有一个，每- -次事件触发，都是把最新的合成对对象值去改为最新的值 但是一旦用完 就把这些值又释放掉了
React18中不存在事件池，每次触发事件 都是创建新的合成事件对象，之前创建的合成对象在没用情况下会销毁掉