下面代码输出什么

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合成事件部分。

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

链接: https://fly63.com/article/detial/11771