为什么以及什么时候需要绑定React中的函数和eventHandlers？

Question

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

我看到不同版本的-------在这里------部分。

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

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

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

Answer 1

绑定并不是特定的反应，而是this在JavaScript中的工作方式。每个函数/块都有自己的上下文，因为函数更具体地取决于它如何调用。React团队决定在添加ES6支持（类语法）时，不将this绑定到类的自定义方法（也不是内置方法，如componentdidmount)上。

绑定上下文的时间取决于函数的用途，如果需要访问类上的props、state或其他成员，则需要绑定它。

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

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

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

b.在类fat arrow functions上创建自定义函数。又名

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

有几种常见的方法可以做到这一点

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

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

带有其他参数

如果您希望避免创建新的函数引用，但仍然需要传递参数，最好将其抽象到子组件中。你可以在这里读到更多关于它的内容

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

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

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

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

您只是将函数作为回调函数传递，以便在click事件发生时触发，而不需要附加参数。一定要预绑定！

总结一下。考虑如何优化您的代码是很好的，每个方法都有一个实用工具/目的取决于您需要什么。