共计 1177 个字符，预计需要花费 3 分钟才能阅读完成。
在 react 组件中，特别要小心 this 的使用。比如，在 Counter 那个示例中，我们使用以下方式声明 increment 和 decrement 方法：
import React, {Component} from “react”
import ReactDOM from “react-dom”
class Counter extends Component {
state = {
count: 0,
}
increment() {
this.setState({
count: this.state.count + 1
})
}
decrement() {
this.setState({
count: this.state.count – 1
})
}
render() {
return (
<div>
<h1> 一共点击了 {this.state.count} 次 </h1>
<input type=”button” value=”+” onClick={this.increment.bind(this)} />
<input type=”button” value=”-” onClick={this.decrement.bind(this)} />
</div>
)
}
}
ReactDOM.render(<Counter />, document.querySelector(“#root”))
这时，点击按钮之后，控制台抛出以下异常：
导致这个异常的原因，实际就是 this 的指向问题
解决方案是将 this 的指向固定下来，最简单的方式就是通过箭头函数来声明方法。
increment = () => {
this.setState({
count: this.state.count + 1
})
}
decrement = () => {
this.setState({
count: this.state.count – 1
})
}
使用箭头函数的方式来声明方法，函数中的 this 指向函数声明时所在的作用域。因此，increment 和 decrement 函数中的 this 就会一直指向当前 Counter 产生的实例，即使是传递给 input 元素来调用。
除了使用箭头函数固化 this 以外，还可以使用 bind 方法，在声明函数时，依然使用普通函数：
increment() {
this.setState({
count: this.state.count + 1
})
}
decrement() {
this.setState({
count: this.state.count – 1
})
}
绑定函数的时候，我们需要可以使用 bind 方法，将当前的作用域绑定到函数上：
<input type=”button” value=”+” onClick={this.increment.bind(this)} />
<input type=”button” value=”-” onClick={this.decrement.bind(this)} />
这两种方法都可以用来固化 this。
