在React中有没有无需给Component类函数绑定this的实现方法？

你当前使用的constructor内手动bind是早期React的标准写法，目前有更简单的行业通用方案：

方案1：公有类字段+箭头函数（最推荐，已成为业界规范） #

直接在类内定义方法时使用箭头函数写法，箭头函数本身没有独立this，会自动继承外层类实例的this，完全不需要手动绑定：

class App extends Component {
  state = {
    currentSection: 1,
    message :{text:''}
  };

  // 直接用箭头函数定义方法，自动绑定this到组件实例
  prevSection = () => {
    // 此处this可直接指向组件实例访问state、props等属性
    console.log(this.state.currentSection)
  }

  nextSection = () => {
    // 业务逻辑代码
  }

  mobileChanged = () => {
    // 业务逻辑代码
  }
}

该写法已经被create-react-app等主流脚手架默认支持，不需要额外配置，也没有额外性能损耗，是目前使用率最高的实现方案。

方案2：调用时用箭头函数包裹（仅适合临时小场景） #

如果是单次调用、不需要把函数作为props传递给子组件的场景，也可以在渲染时直接用箭头函数包裹方法：

render() {
  return <button onClick={() => this.prevSection()}>上一步</button>
}

*注意：该写法每次渲染都会生成新的函数实例，如果将这个函数作为props传给纯组件/子组件，会触发子组件不必要的重渲染，不推荐高频使用。

方案3：调用处直接bind（同样不推荐高频使用） #

和方案2逻辑类似，在调用时直接绑定this：

render() {
  return <button onClick={this.prevSection.bind(this)}>上一步</button>
}

同样存在每次渲染生成新函数的性能问题，仅适合临时应急使用。

内容的提问来源于stack exchange，提问作者Ehsan88