react事件系统之事件绑定

左手的ㄟ右手 2022-01-12 01:47 314阅读 0赞

NodeNote，持续更新中react相关库源码浅析， react ts3 项目

概述，背景

  1. <div id="app"></div>
  2. <div onclick="alert(1)">原生</div>
  4. class APP extends React.Component{
  5.     render(){
  6.         return (
  7.             <div>
  8.                 <Header/>
  9.             </div>
  10.         )
  11.     }
  12. }
  14. class Header extends React.Component{
  15.     clickHandler(){
  16.         console.log("click")
  17.     }
  18.     render(){
  19.         return (
  20.             <div>
  21.                 <div onClick={this.clickHandler.bind(this)} a={1}>
  22.                     this is Header
  23.                 </div>
  24.                 <p onClick={this.clickHandler.bind(this)} a={1}>
  25.                     this is Header
  26.                 </p>
  27.             </div>
  28.         )
  29.     }
  30. }
  31. ReactDOM.render(
  32.     <APP/>,
  33.     document.getElementById('app')
  34. );
  35. 复制代码

上述的组件中点击事件的绑定过程如下：

绑定阶段主要是在document上注册一些事件，如下：

可以看到，在渲染出来的DOM节点上并没有click事件，用到事件代理，当点击事件触发的时候，document监听到点击事件触发了，就会调用handler对应的函数dispatchInteractiveEvent开始分发点击事件，进而调用对应节点上的点击事件处理函数。

事件绑定后jsx与原生DOM的区别

为了做对比，写了一个原生的div以及对应的onclick事件处理函数，查看渲染出来的html可以知道：react的jsx写的onClick并没有在渲染出来的DOM上添加onclick事件处理函数，这与原生DOM不一样。

进一步查看react节点与原生DOM上的handler如下：

可以看到：react会将jsx上所有节点的onClick事件绑定到document上，然后为渲染出来的DOM添加一个空函数noop作为点击事件的处理函数。在document监听到点击事件的时候，会去fiber树上搜集之前jsx上添加的真正的处理函数，并存入数组，依次执行。

其他节点

转载于:https://juejin.im/post/5d0af976e51d454fbf540a0f

发表评论

表情：
评论列表 （有 0 条评论，314人围观）

还没有评论，来说两句吧...

相关阅读

    相关 React 项目--button 绑定事件（15）

    不知不觉中写博客已经成为了一种习惯，不仅仅是一种学习知识吧，也是一种清楚自己学习了那些的内容。在前面的博客中我们慢慢的介绍了一些react基本的语法，现在我们继续来react按

    女爷i女爷i/ 0 赞/ 263 阅读

    相关 react+ES6(事件绑定)

    最近一直在看react。之前看react的时候很多都是旧的写法（es5），这几天因项目要求把es6和react一起结合看了一下，自己也写了几个demo，想把这些demo拿出来分

    以你之姓@以你之姓@/ 0 赞/ 364 阅读