react的事件绑定(React事件绑定的方式详解)
类别:编程学习 浏览量:903
时间:2021-10-01 01:40:40 react的事件绑定
React事件绑定的方式详解 一、是什么在react
应用中,事件名都是用小驼峰格式进行书写,例如onclick
要改写成onClick
最简单的事件绑定如下:
class ShowAlert extends React.Component { showAlert() { console.log("Hi"); } render() { return <button onClick={this.showAlert}>show</button>; } }
从上面可以看到,事件绑定的方法需要使用{}
包住
上述的代码看似没有问题,但是当将处理函数输出代码换成console.log(this)
的时候,点击按钮,则会发现控制台输出undefined
为了解决上面正确输出this
的问题,常见的绑定方式有如下:
- render方法中使用bind
- render方法中使用箭头函数
- constructor中bind
- 定义阶段使用箭头函数绑定
render方法中使用bind
如果使用一个类组件,在其中给某个组件/元素一个onClick
属性,它现在并会自定绑定其this
到当前组件,解决这个问题的方法是在事件函数后使用.bind(this)
将this
绑定到当前组件中
class App extends React.Component { handleClick() { console.log('this > ', this); } render() { return ( <li onClick={this.handleClick.bind(this)}>test</li> ) } }
这种方式在组件每次render
渲染的时候,都会重新进行bind
的操作,影响性能
render方法中使用箭头函数
通过ES6
的上下文来将this
的指向绑定给当前组件,同样在每一次render
的时候都会生成新的方法,影响性能
class App extends React.Component { handleClick() { console.log('this > ', this); } render() { return ( <li onClick={e => this.handleClick(e)}>test</li> ) } }
constructor中bind
在constructor
中预先bind
当前组件,可以避免在render
操作中重复绑定
class App extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('this > ', this); } render() { return ( <li onClick={this.handleClick}>test</li> ) } }
定义阶段使用箭头函数绑定
跟上述方式三一样,能够避免在render
操作中重复绑定,实现也非常的简单,如下:
class App extends React.Component { constructor(props) { super(props); } handleClick = () => { console.log('this > ', this); } render() { return ( <li onClick={this.handleClick}>test</li> ) } }
上述四种方法的方式,区别主要如下:
- 编写方面:方式一、方式二写法简单,方式三的编写过于冗杂
- 性能方面:方式一和方式二在每次组件render的时候都会生成新的方法实例,性能问题欠缺。若该函数作为属性值传给子组件的时候,都会导致额外的渲染。而方式三、方式四只会生成一个方法实例
综合上述,方式四是最优的事件绑定方式
到此这篇关于React事件绑定的方式的文章就介绍到这了,更多相关React事件绑定内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- reactnative零基础入门到项目实战(用React Native制作一个简单的游戏引擎)
- react教程简介(react入门级详细笔记)
- react怎么使用父组件(关于antd tree和父子组件之间的传值问题react 总结)
- reactnative动态设置值(react native实现监控手势上下拉动效果)
- react的动画实现(React实现动效弹窗组件)
- react自适应布局如何实现(React实现分页效果)
- react加载优化(React星星评分组件的实现)
- vscode react jsx语法 开发环境(React-vscode使用jsx语法的问题及解决方法)
- html5创作(HTML5录音实践总结Preact)
- reactmap给了key仍然提示错误(react为什么不推荐使用index作为key)
- react和antd项目教程(React引入antd-mobile+postcss搭建移动端)
- vue react和angular(详解React Angular Vue三大前端技术)
- react执行流程(React开启代理的2种实用方式)
- react配置上下文路由(React中Portals与错误边界处理实现)
- react循环有几种方法(React forwardRef的使用方法及注意点)
- react的setstate第二个参数(示例详解react中useState的用法)
- 白T恤穿法(白t恤)
- 你怎么忘了是说先爱我(你怎么忘了如何爱我)
- 做技术难吗(技术难不难)
- 林心如是谁(林心如是谁演的)
- 泰国安全吗(泰国安全吗2023)
- 菲律宾安全吗(菲律宾安全吗)
热门推荐
- 无法访问docker容器内的端口(docker端口映射及外部无法访问问题)
- SQLServer清理日志文件方法案例详解(SQLServer清理日志文件方法案例详解)
- sqlserver数据库如何设置循环日志(sqlserver 实现收缩数据库日志操作)
- mysql是否支持透明数据加密(MySQL的加密解密的几种方式小结)
- 远程访问服务器网络方案(基于http.server搭建局域网服务器过程解析)
- win10安装mysql8.0如何启动(win10下mysql 8.0.23 安装配置方法图文教程)
- php脚本控制方法(php swoole多进程/多线程用法示例基于php7nts版)
- .NET中对枚举的操作
- python批量自动化访问网站(python 自动批量打开网页的示例)
- 已授权和未授权(提示您未被授权查看该页怎么解决?)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9