说说react中onClick绑定后的工作原理

已于 2023-03-27 20:14:33 修改
阅读量121 收藏
点赞数
文章标签： javascript react.js 前端
于 2023-03-27 19:37:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tang18533952786/article/details/129802097
版权

1. 首先react有自己的事件系统，是遵循w3c的，这个事件系统的名称叫做合成事件(SyntheticEvent)，而其自定义事件系统的动机主要包含以下几个方面：

- 抹平不同浏览器之间的兼容性差异。最主要的动机。

- 件合成既可以处理兼容性问题

- 提供一个抽象的跨平台事件机制

- 可以做更多优化

- 可以干预事件的分发

React中onClick绑定后

2. 当给组件(元素)绑定onClick事件之后

(1. react会对事件先进行注册,将事件统一注册到 document上

(2. 根据组件 唯一的标识key来对事件函数进行存储

3. 统一的指定dispatchEvent回调函数

4. 储存事件回调

react会将click这个事件统一存到一个对象中,回调函数的存储采用键值对(key/value)的方式存储在对象中，key 是组件的唯一标识id，value 对应的就是事件的回调函数,通过组件的key就能回调到相应的函数了

爱上猫的程序猿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
框架篇-面试题8-React事件绑定原理
itclanCoder
03-19 235
在React中,事件绑定采用驼峰命名方式,而不是DOM元素中的小写字母命名方式,例如:onclick要写成onClick,onchange要写成onChange等React中绑定的事件不是原生事件,而是由原生事件合成的React事件,例如:click事件合成为onClick事件,blur,change,input,keydown,keyup等合成为onChange,React这么做的原因是为了消除...
说说react中onClick绑定后的工作原理？
m0_69892739的博客
03-20 251
react会将click这个事件统一存到一个对象中,回调函数的存储采用键值对（key/value）的方式存储在对象中，key 是组件的唯一标识 id，value 对应的就是事件的回调函数,通过组件的key就能回调到相应的函数了。1、首先react有自己的事件系统，也是遵循w3c的，这个事件系统的名称叫做合成事件。3、统一的指定dispatchEvent回调函数。2、当给组件(元素)绑定onClick事件之后。
React中onClick绑定后的工作原理
sdasadasds的博客
01-11 261
说说React中onClick绑定后的工作原理
React解密：React事件绑定原理是什么？
lee前端技术站
08-26 2020
React的事件绑定，是通过在react元素上添加事件属性，且事件属性名必须采用驼峰命名的方式，如onClick等。 import React from 'react' const Test = () => { const handleClick = () => { console.log('点击我') } return ( <div onClick={this.handleClick.bind(this)}>点我<
如何理解 React 事件绑定原理
qq_43645678的博客
04-11 719
如何理解 React 事件绑定原理
React事件处理的机制及原理
12-09
在React元素中绑定事件有两点需要注意： （1）在React中，事件命名采用驼峰命名方式，而不是DOM元素中的小写字母命名方式。例如onclick要写成onClick，onchange要写成onChange等。 （2）处理事件的响应函数要以对象...
react-react面试题之事件绑定方式.zip
最新发布
03-20
了解以上React事件绑定方式及其背后原理，可以帮助开发者编写更高效、可维护的代码，并在面试中展现出对React深入的理解。在实际开发中，要根据具体场景选择最合适的事件处理方式，以达到性能与易用性的平衡。
详解react关于事件绑定this的四种方式
08-27
React 事件绑定this 的四种方式 React 事件绑定是 React 中一个非常重要的概念，特别是在使用 ES6 class 或纯函数时，需要手动实现this的绑定。下面我们来详细介绍 React 事件绑定this 的四种方式。 Bind 方法 ...
详解三种方式在React中解决绑定this的作用域问题并传参
10-14
在React开发过程中，经常遇到的一个常见问题是`this`作用域问题，这通常发生在类组件的方法中，导致无法访问到组件的`state`或`props`。本文将详细讲解三种解决在React中`this`作用域问题并传参的方法。 ### 方法一...
React中jquery引用的实现方法
10-19
安装完成后，可以通过`import`语句在React组件中引入jQuery。在示例代码中，我们看到这样的引入方式： ```javascript import $ from 'jquery'; ``` **3. 绑定事件和操作DOM** 在React中，通常使用`onClick`等内建...
React源码解析18（7）------ 实现事件机制（onClick事件）
weixin_46726346的博客
08-15 780
在上一篇中，我们实现了useState的hook，但由于没有实现事件机制，所以我们只能将setState挂载在window上。而这一篇主要就是来实现事件系统，从而实现通过点击事件进行setState。而在React中，虽然我们是将事件绑定在JSX上的某个元素上，但是其实最终的执行者是最外层的容器。也就是说React利用了冒泡的机制，将所有事件都冒泡到了最外层容器上，从而创建合成事件，在对相应的事件执行。})});
解析React事件处理的机制及原理
weixin_33704234的博客
12-07 351
这篇文章主要介绍了React事件处理的机制及原理，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。 React中的事件处理 在React元素中绑定事件有两点需要注意： （1）在React中，事件命名采用驼峰命名方式，而不是DOM元素中的小写字母命名方式。例如onclick要写成onClick，onchange要写成onChange等。 （2）处理事件的响应函数要...
react中onClick绑定后的工作原理？
weixin_61575431的博客
03-27 83
react会将click这个事件统一存到一个对象中,回调函数的存储采用键值对（key/value）的方式存储在对象中，key 是组件的唯一标识 id，value 对应的就是事件的回调函数,通过组件的key就能回调到相应的函数了。首先react有自己的事件系统,也是遵循w3c的,这个事件系统的名称叫做合成事件(SyntheticEvent),而其自定义事件系统的动机主要包含以下几个方面。react会对事件先进行注册,将事件统一注册到。唯一的标识key来对事件函数进行存储。提供一个抽象的跨平台事件机制。
前端面试题（react）
小尘的博客
06-20 9439
性能优化分为2个方面setState 是修改其中的部分状态，相当于 Object. assign，只是覆盖，不会减少原来的状态； replaceState 是完全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性减少，那么 state 中就没有这个状态了接收旧的 state 和 action，返回新的 state受控组件就是可以被 react 状态控制的组件 在 react 中，Input textarea 等组件默认是非受控组件（输入框内部的值是用户控制，和React无关）
combobox 如何 不触发 onchange事件_React 事件系统工作原理
weixin_39660922的博客
12-24 347
本文作者: 江水[1]前言React 为我们提供了一套虚拟的事件系统，这套虚拟事件系统是如何工作的，笔者对源码做了一次梳理，整理了下面的文档供大家参考。在 React事件介绍[2] 中介绍了合成事件对象以及为什么提供合成事件对象，主要原因是因为 React 想实现一个全浏览器的框架， 为了实现这种目标就需要提供全浏览器一致性的事件系统，以此抹平不同浏览器的差异。合成事件对象很有意思，一开...
React onClick/onChange 传参 （bind绑定）
专注基础架构领域
10-21 2971
一般是通过bind 函数绑定 this，来传递参数的，没有参数就是下面这种方式或者直接写函数名，代码如下： //被触发函数写法： const onChange = (e) => { //操作 } onChange={onChange} or onChange={onChange.bind(this)} 有参调用，代码如下： //被触发函数写法： const onChange = (index, e) => { //操作 } 传值调用...
react
q1260257710的博客
07-12 551
react部分
react中onClick事件传参
初心 - 杨瑞超个人博客
09-14 5101
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群)：757345416 在我们实际开发中，单击事件传参也是经常用到的，下面我们来研究下传参问题。 正常绑定事件： &lt;button className="clear-completed" onClick={test()}&gt;点击&lt;/button&gt; 传递参数我们需要这样写： 错误写法： &l...
Vue 学习之 ---事件绑定
qq_33736036的博客
11-15 1901
Vue 事件绑定和事件修饰符
react的事件绑定原理
07-11
React中的事件绑定原理是基于合成事件（SyntheticEvent）的机制。合成事件是React提供的一个跨浏览器的事件系统，它将浏览器原生事件进行封装，提供了统一的接口和一些优化。 在React中，通过使用类似于HTML中的on...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值