React组件绑定this的三种方法
我们在使用React组件时,调用方法常常用到this和event对象,默认情况是不会绑定到组件上的,需要特殊处理。
节点上使用bind绑定
特点:该方法会在每次渲染组件时都会重新绑定一次,消耗一定的性能。不符合表象与行为分离准则
它属于ES5函数扩展的方法Function.prototype.bind(thisArg [, arg1 [, arg2, …]]),bind()返回一个新的函数对象,该函数的this
被绑定到thisArg
上,并向事件处理器中传入参数。
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
hello world
<h3 onClick={this.handleClick.bind(this, 'Jake')}>事件点击</h3>
</header>
</div>
);
}
handleClick(name, event) {
console.log(this)
console.log('事件', event)
console.log('参数', name)
}
}
这里需要注意的是,this必须放在其他实参最前面, 形参event必须放在其他参数后面,并且调用函数时无需传入event对象
构造函数中使用bind绑定
特点:该方式是将bind从节点移到构造函数上, 组件渲染时不会重新绑定。不会造成额外性能损耗
class App extends Component {
constructor() {
super()
this.handleClick = this.handleClick.bind(this, 'Jake')
}
render() {
return (
<div className="App">
<header className="App-header">
hello world
<h3 onClick={this.handleClick}>事件点击</h3>
</header>
</div>
);
}
handleClick(name, event) {
console.log(this)
console.log('事件', event)
console.log('参数', name)
}
}
箭头函数上绑定
特点:该方法分为两种ES6和ES7语法, 利用了箭头函数自动绑定this作用域的特性
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
hello world
<h3 onClick={(e) => {this.handleClick('ketty', e) }} >事件点击</h3>
</header>
</div>
);
}
handleClick(name, event) {
console.log(this)
console.log('事件', event)
console.log('参数', name)
}
}
注意,该方法调用时必须传实参event才能获取event对象,并且它要在其他实参后面传入
(e) => {this.handleClick('ketty', e) }
不过该方法有个问题,就是匿名函数,无法移除监听事件,则需要改用ES7语法糖方式
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
hello world
<h3 onClick={this.handleClick} >事件点击</h3>
</header>
</div>
);
}
handleClick = (event) => {
console.log(this)
console.log('事件', event)
}
}
但此时,没法在调用函数时传入实参
而且该语法糖,在create-react-app上默认支持,如自定义脚手架,则需要安装babel-plugin-transform-class-properties插件解析ES7语法糖
以上三种方法各有特点,需根据实际情况而使用。
React组件绑定this的三种方法的更多相关文章
- 在React中跨组件分发状态的三种方法
在React中跨组件分发状态的三种方法 当我问自己第一百次时,我正在研究一个典型的CRUD屏幕:"我应该将状态保留在这个组件中还是将其移动到父组件?". 如果需要对子组件的状态进行 ...
- React组件绑定this的四种方式
题图 By HymChu From lnstagram 用react进行开发组件时,我们需要关注一下组件内部方法this的指向,react定义组件的方式有两种,一种为函数组件,一种为类组件,类组件内部 ...
- WPF的DataGrid的某个列绑定数据的三种方法(Binding、Converter、DataTrigger)
最近在使用WPF的时候,遇到某个列的值需要根据内容不同进行转换显示的需求.尝试了一下,大概有三种方式可以实现: 1.传统的Binding方法,后台构造好数据,绑定就行. 2.转换器方法(Convert ...
- React Router页面传值的三种方法
文章地址:https://blog.csdn.net/qq_23158083/article/details/68488831
- Jquery动态添加的元素绑定事件的3种方法
假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...
- React绑定this的三种方式
React可以使用React.createClass.ES6 classes.纯函数3种方式构建组件.使用React.createClass会自动绑定每个方法的this到当前组件,但使用ES6 cla ...
- React Router v4 页面传值的三种方法
传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...
- 数据绑定(三)为Binding指定绑定源的几种方法
原文:数据绑定(三)为Binding指定绑定源的几种方法 Binding的源是数据的来源,所以,只要一个对象包含数据并能通过属性把数据暴露出来,它就能当作Binding的源来使用,常用的办法有: 一. ...
- OC和JS交互的三种方法
看简书上说一共有六种OC和JS交互的方法,但是前三种原理都一致,都是通过检测.拦截Url地址实现互相调用的.剩下的react native等第三方框架原理不一样,也没有去研究,下边记录我使用的三种方法 ...
随机推荐
- 想对list里面的对象进行排序
不必使用排序算法.实现Comparator接口就行
- 2017-10-22—LD激光二极管原理
直接摘抄百科了: 在讲激光产生机理之前,先讲一下受激辐射.在光辐射中存在三种辐射过程, 一是处于高能态的粒子自发向低能态跃迁,称之为自发辐射; 二是处于高能态的粒子在外来光的激发下向低能态跃迁,称之为 ...
- [HDU4669]Editor (栈)
题意 模拟编辑器,还是给链接吧 https://vjudge.net/problem/HDU-4699 思路 两个栈 代码 //poj1050 //n^4暴力 #include<algorith ...
- Egret的Shape
class ShapeTest extends egret.DisplayObjectContainer { public constructor() { super(); this.addEvent ...
- MVC中EF代码优先问题
在练习Mvc项目时,提示如下数据库错误: The model backing the 'EFDbContext' context has changed since the database was ...
- wamp 环境安装php_mongo 或 mongodb的扩展
特别注意:momgo 与mondb 是两个不同的扩展,不是同一个,这是一个坑 1.查看你的php版本,Compiler,Thread safety版本 2.下载地址 https://pecl.php. ...
- js高级4
1.Date 类 getDate()返回一个月中的某一天 1-31 getDay() 返回一周中的某一天0-6 getFullyear()返回四位数的年份 getMonth()返回月份 比实际情况小 ...
- 选择性计量学(Altmetric)介绍
不论是对科研人员还是对机构知识库管理者来说,对文章或期刊使用定量数据来评价都是很有意义的.比如,科研人员或论文的作者可以通过这些数据来了解该学科的基本情况,也可以为其个人总结或个人简历补充更为精细.更 ...
- 【蓝桥杯真题】地宫取宝(搜索->记忆化搜索详解)
链接 [蓝桥杯][2014年第五届真题]地宫取宝 题目描述 X 国王有一个地宫宝库.是 n x m 个格子的矩阵.每个格子放一件宝贝.每个宝贝贴着价值标签. 地宫的入口在左上角,出口在右下角. 小明被 ...
- js, Date.parse firefox 兼容
Date.parse(dateVal); 这个方法很常用,parse() 方法可解析一个日期时间字符串,并返回 1970/1/1 午夜距离该日期时间的毫秒数. 可以验证输入日期是否窜在,不存在则返回N ...