React组件绑定this的三种方法
我们在使用React组件时,调用方法常常用到this和event对象,默认情况是不会绑定到组件上的,需要特殊处理。
节点上使用bind绑定
特点:该方法会在每次渲染组件时都会重新绑定一次,消耗一定的性能。不符合表象与行为分离准则
它属于ES5函数扩展的方法Function.prototype.bind(thisArg [, arg1 [, arg2, …]]),bind()返回一个新的函数对象,该函数的this
被绑定到thisArg
上,并向事件处理器中传入参数。
1 class App extends Component { 2 render() { 3 return ( 4 <div className="App"> 5 <header className="App-header"> 6 hello world 7 <h3 onClick={this.handleClick.bind(this, 'Jake')}>事件点击</h3> 8 </header> 9 </div> 10 ); 11 } 12 handleClick(name, event) { 13 console.log(this) 14 console.log('事件', event) 15 console.log('参数', name) 16 } 17 }
这里需要注意的是,this必须放在其他实参最前面, 形参event必须放在其他参数后面,并且调用函数时无需传入event对象
构造函数中使用bind绑定
特点:该方式是将bind从节点移到构造函数上, 组件渲染时不会重新绑定。不会造成额外性能损耗
1 class App extends Component { 2 constructor() { 3 super() 4 this.handleClick = this.handleClick.bind(this, 'Jake') 5 } 6 render() { 7 return ( 8 <div className="App"> 9 <header className="App-header"> 10 hello world 11 <h3 onClick={this.handleClick}>事件点击</h3> 12 </header> 13 </div> 14 ); 15 } 16 handleClick(name, event) { 17 console.log(this) 18 console.log('事件', event) 19 console.log('参数', name) 20 } 21 }
箭头函数上绑定
特点:该方法分为两种ES6和ES7语法, 利用了箭头函数自动绑定this作用域的特性
1 class App extends Component { 2 render() { 3 return ( 4 <div className="App"> 5 <header className="App-header"> 6 hello world 7 <h3 onClick={(e) => {this.handleClick('ketty', e) }} >事件点击</h3> 8 </header> 9 </div> 10 ); 11 } 12 handleClick(name, event) { 13 console.log(this) 14 console.log('事件', event) 15 console.log('参数', name) 16 } 17 }
注意,该方法调用时必须传实参event才能获取event对象,并且它要在其他实参后面传入
(e) => {this.handleClick('ketty', e) }
不过该方法有个问题,就是匿名函数,无法移除监听事件,则需要改用ES7语法糖方式
1 class App extends Component { 2 render() { 3 return ( 4 <div className="App"> 5 <header className="App-header"> 6 hello world 7 <h3 onClick={this.handleClick} >事件点击</h3> 8 </header> 9 </div> 10 ); 11 } 12 handleClick = (event) => { 13 console.log(this) 14 console.log('事件', event) 15 } 16 }
但此时,没法在调用函数时传入实参
而且该语法糖,在create-react-app上默认支持,如自定义脚手架,则需要安装babel-plugin-transform-class-properties插件解析ES7语法糖
以上三种方法各有特点,需根据实际情况而使用。