为什么在某些情况下“this”绑定不同，但在 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。