为什么以及何时需要在 React 中绑定函数和事件处理程序？

class SomeClass extends Component{
  someEventHandler(event){
  }
  render(){
    return <input onChange={------here------}>
  }
}

我看到不同版本的------here------ part.

// 1
return <input onChange={this.someEventHandler.bind(this)}>

// 2
return <input onChange={(event) => { this.someEventHandler(event) }>

// 3
return <input onChange={this.someEventHandler}>

版本有何不同？或者这只是一个偏好问题？

谢谢大家的回答和评论。所有内容都有帮助，我强烈建议阅读此链接FIRST如果你和我一样对此感到困惑。
http://blog.andrewray.me/react-es6-autobinding-and-createclass/ http://blog.andrewray.me/react-es6-autobinding-and-createclass/

绑定并不是 React 特有的东西，而是如何绑定的this在 JavaScript 中工作。每个函数/块都有自己的上下文，对于函数来说，其调用方式更具体。 React 团队做出了一个决定this不绑定到类的自定义方法（又名不是内置方法，如componentDidMount），当添加 ES6 支持（类语法）时。

何时应该绑定上下文取决于函数的目的，如果您需要访问类上的 props、state 或其他成员，那么您需要绑定它。

对于您的示例，每个都是不同的，这取决于您的组件的设置方式。

预先绑定到您的班级

.bind(this)用于将 this 上下文绑定到您的组件函数。但是，它在每个渲染周期返回一个新的函数引用！如果您不想绑定该函数的每次使用（例如在单击处理程序中），您可以预先绑定该函数。

a.在你的构造函数中进行绑定。又名

class SomeClass extends Component{
    constructor(){
        super();
        this.someEventHandler = this.someEventHandler.bind(this);
    }
    someEventHandler(event){
    }
    ....
} 

b.在类胖箭头函数上创建自定义函数。又名

class SomeClass extends Component{
    someEventHandler = (event) => {
    }
    ....
}

运行时绑定到您的类

一些常见的方法可以做到这一点

a.您可以使用内联 lambda（粗箭头）函数包装组件处理程序函数。

onChange={ (event) => this.someEventHandler(event) }

这可以提供附加功能，例如您需要为点击处理程序传递附加数据<input onChange={(event) => { this.someEventHandler(event, 'username') }>。同样可以用bind

b.您可以使用.bind(this)如上所述。

onChange={ this.someEventHandler.bind(this) }

带有附加参数<input onChange={ this.someEventHandler.bind(this, 'username') }>

如果您想避免创建新的函数引用但仍需要传递参数，最好将其抽象为子组件。您可以在这里阅读更多相关内容 https://stackoverflow.com/a/29810951/2733506

在你的例子中

// 1
return <input onChange={this.someEventHandler.bind(this)}>

这只是将运行时事件处理程序绑定到您的类。

// 2
return <input onChange={(event) => this.someEventHandler(event) }>

另一个运行时绑定到您的类。

// 3
return <input onChange={this.someEventHandler}>

您只需将该函数作为回调函数传递，以便在单击事件发生时触发，无需其他参数。确保预先绑定它！

总结一下。考虑如何优化代码是件好事，每种方法都有一个实用程序/目的，具体取决于您的需要。