为什么默认情况下React.js不将其功能与此对象绑定

Question

我无法想象函数的用例没有被该对象绑定。我认为所有功能都需要与此绑定。那么为什么Reactjs在默认情况下不设置bind（this）？例如下面的代码，如果我没有设置bind（this），这些功能将无用，对吧？

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(ex) {
    this.setState({ username: event.target.value })
  }

  handleSubmit(event) {
    event.preventDefault()
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          value={this.state.username}
          onChange={this.handleChange}
        />
        <input type="submit" value="Submit" />
      </form>
    )
  }
}

Answer 1

如果您不想在构造函数中绑定此对象，请尝试将函数用作箭头函数，它将自动绑定此对象。您无需显式地执行此操作。

 handleChange =(ex)=> {
    this.setState({ username: event.target.value })
  }