React 的合成事件(SyntheticEvent)是什么?和原生事件有什么区别?
React 在根节点(React 17 起为容器根,17 前为 document)上统一委托监听原生事件,再派发到自己模拟的事件系统,所有 onClick 等拿到的是跨浏览器统一的 SyntheticEvent。
区别/注意点:
- 统一接口:自动做了浏览器兼容(如
e.target、e.preventDefault行为一致) - 池化(旧版本):React 17 前事件对象会被复用,异步中访问需
e.persist();17+ 已废弃池化 - 不能混用阻止冒泡逻辑:在子组件
stopPropagation阻止的是 React 合成事件冒泡,不影响原生;若同时绑了原生addEventListener,注意两者触发顺序(原生在根,合成也在捕获/冒泡阶段由根派发) - 事件名用驼峰:
onClick而非onclick