合成事件是什么？
React 合成事件是基于浏览器事件机制（事件委托） 实现了一套自身的机制，即浏览器原生事件的跨浏览器包装器。旨在兼容所有浏览器，更好的跨平台，方便 React 统一进行事件管理，更好地控制事件的执行链路。
React17 事件特性
-
React16 将事件委托到 document 上，只做了冒泡阶段的委托；React17 及以后则委托到根节点，且捕获和冒泡都做了委托
-
去除事件池
原理
const root = document.querySelector('#root'),
const outer = document.querySelector('#outer'),
const inner = document.querySelector('#inner');
// 经过视图渲染解析，outer/inner上都有onXxx/onXxxCapture这样的属性
/* <div className="outer"
onClick={() => { console.log('outer 冒泡「合成」'); }}
onClickCapture={() => { console.log('outer 捕获「合成」'); }}>
<div className="inner"
onClick={() => { console.log('inner 冒泡「合成」'); }}
onClickCapture={() => { console.log('inner 捕获「合成」'); }}
></div>
</div>; */
outer.onClick = () => { console.log('outer 冒泡「合成」'); }
outer.onClickCapture = () => { console.log('outer 捕获「合成」'); }
inner.onClick = () => { console.log('inner 冒泡「合成」'); }
inner.onClickCapture = () => { console.log('inner 捕获「合成」'); }
// 给#root做事件绑定
root.addEventListener('click', (ev) => {
let path = ev.path; // path:[事件源->....->window] 所有祖先元素
[...path].reverse().forEach(ele => {
let handle = ele.onClickCapture;
if (handle) handle();
});
}, true);
root.addEventListener('click', (ev) => {
let path = ev.path;
path.forEach(ele => {
let handle = ele.onClick;
if (handle) handle();
});
}, false);
评论区