本文转载自微信公众号《JS日报》，作者慧慧。转载本文请联系JS每日一问公众号。1.什么是反应？它基于浏览器的事件机制，实现了一套事件机制，包括事件注册、事件合成、事件冒泡、事件派发等。React中的这套事件机制称为合成事件合成事件（SyntheticEvent）合成事件是一个event对象，React模拟原生DOM事件的所有能力，即浏览器原生事件的跨浏览器包装器，根据W3C规范定义合成事件，兼容所有浏览器，与浏览器原生事件具有相同的接口，例如:constbutton=button如果想获取原生DOM事件，可以获取constandleClick=(e)=>console.log(e.nativeEvent);通过e.nativeEvent属性；；constbutton=Button从上面我们可以看出React事件和Native事件也很相似，但是也有一定的区别：事件名称命名方式不同//Native事件绑定方法按钮命名//React合成事件绑定方法constbutton=按钮命名事件处理函数写法不同//Native事件事件处理函数写法按钮命名//React合成事件事件处理函数写法constbutton=按钮命名虽然onclick好像是绑定的对于DOM元素，其实并没有事件代理功能，不会直接绑定到真正的节点上，而是所有的事件都会绑定到结构体的最外层，并使用一个统一的事件来监听事件监听器。在事件监听器上维护一个映射，保存所有组件内部的事件监听和处理功能。当组件挂载或卸载时，它只是在这个统一的事件监听器上插入或删除一些对象。当一个事件发生时，首先被这个统一的事件监听器处理，然后在映射中找到真正的事件处理函数并调用它。这样简化了事件处理和回收机制，效率也大大提高。2.执行顺序关于React合成事件和原生事件的执行顺序，可以看下面的例子：);this.childRef=React.createRef();}componentDidMount(){console.log("ReactcomponentDidMount!");this.parentRef.current?.addEventListener("点击",()=>{console.log("原生事件：父元素DOM事件监听！”);});this.childRef.current?.addEventListener("click",()=>{console.log("原生事件：子元素DOM事件监听！");});document.addEventListener("click",(e)=>{console.log("Nativeevent:documentDOMeventlistener!");});}parentClickFun=()=>{console.log("Reactevent:父元素事件监听！");};childClickFun=()=>{console.log("Reactevent:子元素事件监听！");};render(){return(分析事件执行顺序
