3

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

 2 years ago
source link: https://www.fly63.com/article/detial/11771
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

更新日期: 2022-06-20阅读量: 18标签: 事件分享

扫一扫分享

下面代码输出什么

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

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

  • react中的所有事件都是挂载到document上的
  • 当真实 dom 触发冒泡到 document 后才会对react事件进行处理
  • 所以JS原生事件会先执行
  • 然后执行React的合成事件
  • 最后执行真正挂载到 document上的事件
来自：https://segmentfault.com/a/1190000042005939

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK