作者微信
微

通过一道题来看React事件模型

小技术 7个月前 (06-23) 0 999+

下面代码输出什么

const MainApp = () => {   const parentRef = useRef();   const childRef = useRef();   const parentClickFun = useCallback(() => {     console.log('react parent');   }, []);   const childClickFun = useCallback(() => {     console.log('react child');   }, []);   useEffect(() => {     document.addEventListener('click', () => {       console.log('document');     });     parentRef.current?.addEventListener('click', () => {       console.log('dom parent');     });     childRef.current?.addEventListener('click', () => {       console.log('dom child');     });   }, []);   return (     <div ref={parentRef} onClick={parentClickFun}>       <div ref={childRef} onClick={childClickFun}>         事件执行顺序       </div>     </div>   ); };

执行结果：

dom child
dom parent
react child
react parent
document

代码分析

主要是考察 React 合成事件和 JS 原生事件的区别，以及它们的执行顺序。以React16.x版本之前的来分析。React16.x 以后有变更。
分析一下上面的代码：可以分成两部分来看，JS原生事件部分及React合成事件部分。

useEffect 里面都是直接通过 addEventListener 做的事件绑定，如果addEventListener 不指定第二个参数的话，默认是冒泡阶段执行。所以 useEffect里的执行顺序 dom child, dom parent, document
再来看 parentClickFun， childClickFun 这两个函数是通过 React 的事件去绑定的。React 利用事件委托机制在 document 上统一监听DOM事件，再根据触发的target将事件分发到具体的组件实例。React 自己实现了一套冒泡机制。所以这部分的执行顺序为：react child，react parent

最后来理解一下整个的执行顺序。