React组件绑定this的四种方式
用react进行开发组件时，我们需要关注一下组件内部方法this的指向，react定义组件的方式有两种，一种为函数组件，一种为类组件，类组件内部可以定义一些方法，这些方法的this需要绑定到组件实例上，这里总结了一下，一共有四种方案：
第一种方案，在构造函数内部使用bind绑定this，这样做的好处是，避免每次渲染时都要重新绑定，代码如下：
import React, {Component} from 'react'
class Test extends React.Component {
constructor (props) {
super(props)
this.state = {message: 'Allo!'}
//在构造函数中绑定this
this.handleClick = this.handleClick.bind(this)
}
handleClick (e) {
console.log(this.state.message)
}
render () {
return (
<div>
<button onClick={ this.handleClick }>Say Hello</button>
</div>
)}
}
第二种方案同样是用bind，但是这次不再构造函数内部使用，而是在render函数内绑定，但是这样的话，每次渲染都需要重新绑定，代码如下：
import React, {Component} from 'react'
class Test extends React.Component {
constructor (props) {
super(props)
this.state = {message: 'Allo!'}
}
handleClick (name, e) {
console.log(this.state.message + name)
}
//在render函数中绑定
render () {
return (
<div>
<button onClick={ this.handleClick.bind(this, '赵四') }>Say Hello</button>
</div>
)
}
}
第三种方案是在render函数中，调用方法的位置包裹一层箭头函数，因为箭头函数的this指向箭头函数定义的时候其所处作用域的this，而箭头函数在render函数中定义，render函数this始终指向组件实例，所以箭头函数的this也指向组件实例，代码如下：
class Test extends React.Component {
constructor (props) {
super(props)
this.state = {message: 'Allo!'}
}
handleClick (e) {
console.log(this.state.message)
}
//通过箭头函数绑定this
render () {
return (
<div>
<button onClick={ ()=>{ this.handleClick() } }>Say Hello</button>
</div>
)
}
第四种方案：属性初始化器语法
class Test extends React.Component {
handleClick = () => {
}
render () {
return (
<div>
<button onClick={ this.handleClick }>Say Hello</button>
</div>
)
}
}
注意：
上述第四种方案仅限于执行函数无需入参的情况，onClick事件如果包含() ，就会变成执行函数，页面加载后函数会自动执行。
解决方案：
//1.在箭头函数中执行函数
class Test extends React.Component {
handleClick = (name) => {
console.log(name)
}
render () {
return (
<div>
<button onClick={()=>{this.handleClick('tom')}}>Say Hello</button>
</div>
)
}
}
//2.手动绑定this
class Test extends React.Component {
handleClick = (name) => {
console.log(name)
}
render () {
return (
<div>
<button onClick={()=>{this.handleClick.bind(this, 'tom')}}>Say Hello</button>
</div>
)
}
}
