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

最新推荐文章于 2024-06-25 10:09:02 发布
最新推荐文章于 2024-06-25 10:09:02 发布
阅读量257 收藏
点赞数
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69892739/article/details/129676720
版权
React使用合成事件来处理浏览器兼容性，通过在document上注册事件并存储回调函数。事件回调以键值对形式存储，key为组件ID，value为事件函数，统一调用dispatchEvent。这样能优化性能并实现跨平台的事件管理。
摘要由CSDN通过智能技术生成

1、首先react有自己的事件系统，也是遵循w3c的，这个事件系统的名称叫做合成事件。而自定义事件系统的动机只要包含一下几个方面：

  • 抹平不同浏览器之间的兼容性差异。最主要的动机。
  • 件合成既可以处理兼容性问题
  • 提供一个抽象的跨平台事件机制
  • 可以做更多优化
  • 可以干预事件的分发

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

  • react会对事件先进行注册,将事件统一注册到document上
  • 根据组件唯一的标识key来对事件函数进行存储

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

夏兮颜☆
关注
React事件处理的机制及原理
12-09
React中的事件处理 在React元素中绑定事件有两点需要注意： （1）在React中，事件命名采用驼峰命名方式，而不是DOM元素中的小写字母命名方式。例如onclick要写成onClick，onchange要写成onChange等。 （2）处理事件的响应函数要以对象的形式赋值给事件属性，而不是DOM中的字符串形式。例如在DOM中绑定一个点击事件应该写成： <button onclick="clickButton()"> Click </button> 而在React元素中绑定一个点击事件变成这种形式： <button onClick={clickButton}> // cli
React事件及绑定方式
xiaozdi的博客
03-02 1176
因为React里我们操作的都是虚拟DOM，所有在JSX语法结构里绑定的事件并不是真正的DOM事件，我们称之为"React控制事件"；使用bind方法绑定，第一个参数是绑定的实例对象this(组件实例对象)，从参数2以后，是事件触发时，传递的参数(实参)；on+事件名={()=>{ this.方法名(参数1，参数2)} }1.调用的方法中能够获取this对象(组件实例对象)；1.调用的方法中能够获取this对象(组件实例对象)；1.调用的方法中能够获取this对象(组件实例对象)；
React中的事件绑定的四种方式
最新发布
duanyuehuan
06-25 323
1.在构造函数中绑定事件。4.直接传入一个箭头函数。2.在调用时显式绑定。
框架篇-面试题8-React事件绑定原理
itclanCoder
03-19 258
在React中,事件绑定采用驼峰命名方式,而不是DOM元素中的小写字母命名方式,例如:onclick要写成onClick,onchange要写成onChange等React中绑定的事件不是原生事件,而是由原生事件合成的React事件,例如:click事件合成为onClick事件,blur,change,input,keydown,keyup等合成为onChange,React这么做的原因是为了消除...
React解密：React事件绑定原理是什么？
lee前端技术站
08-26 2032
React的事件绑定，是通过在react元素上添加事件属性，且事件属性名必须采用驼峰命名的方式，如onClick等。 import React from 'react' const Test = () => { const handleClick = () => { console.log('点击我') } return ( <div onClick={this.handleClick.bind(this)}>点我<
前端面试题（react）
小尘的博客
06-20 9796
性能优化分为2个方面setState 是修改其中的部分状态，相当于 Object. assign，只是覆盖，不会减少原来的状态； replaceState 是完全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性减少，那么 state 中就没有这个状态了接收旧的 state 和 action，返回新的 state受控组件就是可以被 react 状态控制的组件 在 react 中，Input textarea 等组件默认是非受控组件（输入框内部的值是用户控制，和React无关）
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.js绑定this的5种方法(小结)
10-18
在React.js中，正确地绑定this关键字是一个经常被讨论的话题。随着React版本的演进，对于如何在组件中绑定this，开发者们有多种选择。本文将详细探讨在React中绑定this的五种方法，并对每种方法进行分析。 1. 使用...
React入门实战：React中的事件处理
AI架构设计之禅
11-10 223
1.背景介绍 JavaScript是一个高级、动态、弱类型语言，因此它提供了很多可以用于构建用户界面的数据结构、语法和函数库。其中最重要的组成部分就是DOM（Document Object Model）对象模型，它提供对HTML文档中元素及其属性的直接访问。在React中，DOM节点通过JSX语法渲染到浏览器的页面上。然而，与普通的DOM不同，Reac
react——事件绑定
m0_55173487的博客
12-26 1826
react有两种写法，一种是类组件，也叫有状态组件；一种是函数式组件，也叫无状态组件，而后引入了react hooks，函数式组件也能修改状态。在这两种组件中的事件绑定的原理一样，写法不一样。这篇文章主要就是记录这两种组件中的事件绑定写法。
React-(4)React中的事件绑定
AG.『Feng』的博客
09-15 160
react中的事件绑定
说说react中onClick绑定后的工作原理
tang18533952786的博客
03-27 130
react会将click这个事件统一存到一个对象中,回调函数的存储采用键值对(key/value)的方式存储在对象中，key 是组件的唯一标识id，value 对应的就是事件的回调函数,通过组件的key就能回调到相应的函数了。(1. react会对事件先进行注册,将事件统一注册到 document上。(2. 根据组件 唯一的标识key来对事件函数进行存储。- 抹平不同浏览器之间的兼容性差异。- 提供一个抽象的跨平台事件机制。- 件合成既可以处理兼容性问题。- 可以干预事件的分发。
React源码解析18（7）------ 实现事件机制（onClick事件）
weixin_46726346的博客
08-15 811
在上一篇中，我们实现了useState的hook，但由于没有实现事件机制，所以我们只能将setState挂载在window上。而这一篇主要就是来实现事件系统，从而实现通过点击事件进行setState。而在React中，虽然我们是将事件绑定在JSX上的某个元素上，但是其实最终的执行者是最外层的容器。也就是说React利用了冒泡的机制，将所有事件都冒泡到了最外层容器上，从而创建合成事件，在对相应的事件执行。})});
React onClick/onChange 传参 （bind绑定）
专注基础架构领域
10-21 2984
一般是通过bind 函数绑定 this，来传递参数的，没有参数就是下面这种方式或者直接写函数名，代码如下： //被触发函数写法： const onChange = (e) => { //操作 } onChange={onChange} or onChange={onChange.bind(this)} 有参调用，代码如下： //被触发函数写法： const onChange = (index, e) => { //操作 } 传值调用...
事件绑定的几种方式(React的事件绑定)
qq_46051895的博客
02-07 404
js的事件绑定的几种方法，react组件的事件绑定方法
前端react入门day02-React中的事件绑定与组件
来自计科萌新的编程记录本
10-31 6489
学习目标：1.了解react中的事件绑定操作 2.学会运用react中的组件
React 绑定 onClick 事件不生效问题分析，原来是绑定方法二不归！初学需注意
本博客纯属个人网络笔记，如对阁下有用，甚喜；否则，关掉即可，不喜勿喷。专心写代码，不做键盘侠！
07-24 5515
复制粘贴的代码，没经过测试，你敢提交吗？是的，复制代码，如果觉得很简单，不想启动环境测试的话，最好的方法是目测，然后 SVN 比对分析，看看改了什么，有没有改完整。从以往的经验来看，无论复制什么代码，只要心里感觉太简单，有所松懈，就可能有坑！ ..................
react中，函数如何绑定参数？
08-04
我们可以在React组件的事件处理函数中使用这个绑定后的函数，如onClick事件： ``` class MyComponent extends React.Component { handleClick = (title) => { console.log(title); } render() { return ( ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夏兮颜☆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值