javascript - 为什么 "this"在某些情况下绑定(bind)不同，但在 React 中的其他情况下相同？

Question

在此组件中，如果不是箭头函数，我无法通过 this.functionName 调用 render 方法中的函数。但是，我能够在箭头函数和常规函数中有效地调用 this.setState。为什么在像这样的 React 组件中“this”在某些情况下不同，但在其他情况下似乎相同？

import React from 'react';

class Address extends React.Component {

state = {
    fullAddress: "5001"
}

componentDidMount() {
    this.setState({
        fullAddress: "hello"
    })
}

hello = () => {
    this.setState({
        fullAddress: "hello1"
    })
}

logMessage() {
    console.log(this.state.fullAddress);
}

 render() {
   return (
     <div className="address">
       {this.state.fullAddress}
       <input type="button" value="Log" onClick={this.hello} />
     </div>
   );
 }
}

export default Address;

Answer 1

在您的示例中，logMessage 可能会中断，因为您需要为其指定 this 上下文。

在这种情况下，只需将它绑定(bind)到Address的构造函数中，如下所示:

class Address extends Component {
  constructor(props) {
    super(props)

    this.logMessage = this.logMessage.bind(this)
  }
} 

第二种方法与您已经将 hello 作为箭头函数使用的方法相同。 Arrow functions保留当前上下文 (this)，这就是为什么您可以在 hello 的正文中访问 this.setState 的原因。