我们在使用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语法糖
以上三种方法各有特点,需根据实际情况而使用。