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等第三方框架原理不一样,也没有去研究,下边记录我使用的三种方法 ...
随机推荐
- UOJ#405. 【IOI2018】组合动作
原文链接https://www.cnblogs.com/zhouzhendong/p/IOI2018Day1T1.html 题解 首先二分一下,花费2次操作求出第一位的字符. 假设第一个字符是 Y,答 ...
- 前端技术之--CSS
在标签上设置style属性: background-color: #2459a2; height: 48px; ... 编写css样式: 1. 标签的style属性 2. 写在head里面 style ...
- java 解析富文本处理 img 标签
很多项目都需要到富文本来添加内容,就好比新闻啊,旅游景点之类的,都需要使用富文本去添加数据,然而怎么我这边就发现了两个问题 1)怎样将富文本的图片的 src 获取出来? 2)后台上传的时候用的是相对路 ...
- 管理Android设备的唤醒状态
当一个Android设备闲置时,首先它的屏幕将会变暗,然后关闭屏幕,最后关闭CPU. 这样可以防止设备的电量被迅速消耗殆尽.但是,有时候也会存在一些特例: Apps such as games or ...
- Android数据存储引擎---SQLite数据库
目标:是否可以在PC端桌面上使用SQLite数据库制作一个财务文件? 目录: 来源: 实践: 总结和比较: SQLite数据简介 是什么,内部结构是怎样的,数据库和表的关系是什么 有什么用 常用的操作 ...
- BZOJ4665: 小w的喜糖 DP
对于这道题,首先每个人的位置并不影响结果 所以我们可以将相同颜色糖果的人放在一块处理 设 $f_{i,j}$ 表示处理到第 $i$ 种糖果至少有 $j$ 人的糖果和原先的类型相同 枚举当前种类中不满足 ...
- selenium3 TestNG 介绍与配置
一.TestNG介绍 我之前有学习过Junit,Nunit 这些工具,现在想看看TestNG,那么TestNG是什么呢?他们之间有什么区别呢? TestNG(Next Generation)是一个测试 ...
- NOIP-扫雷游戏
题目描述 扫雷游戏是一款十分经典的单机小游戏.在n行m列的雷区中有一些格子含有地雷(称之为地雷格),其他格子不含地雷(称之为非地雷格).玩家翻开一个非地雷格时,该格将会出现一个数字——提示周围格子中有 ...
- Java当中的异常2
1.throw的作用 如果一行有可能代码抛出Execption对象或者check exception 就必须对这行代码进行处理 2.throws的作用 Throws表明这个类或者方法可能会产生一个指定 ...
- [LeetCode] Most Common Word 最常见的单词
Given a paragraph and a list of banned words, return the most frequent word that is not in the list ...