为什么以及何时需要在React中绑定函数和eventHandler？

Question

class SomeClass extends Component{
someEventHandler(event){
}
render(){
return
}
}

我看到------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

绑定不是特定于React的东西，而是this在Javascript中的工作方式。每个函数/块都有其自己的上下文，对于函数而言，其功能更特定于其调用方式。当添加ES6支持（类语法）时，React团队决定this不绑定类的自定义方法（也不是诸如的内置方法componentDidMount）。

何时绑定上下文取决于函数的用途，如果您需要访问类的props，state或其他成员，则需要对其进行绑定。

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

预绑定到您的班级

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

一种。 在构造函数中进行绑定。又名

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

b。 使您的自定义函数在类的胖箭头函数上。又名

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

运行时绑定到您的课程

几种常用的方法

一种。 您可以使用内联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') }>

如果要避免创建新的函数引用，但仍需要传递参数，则最好将其抽象为子组件。

在你的例子中

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

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

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

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

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

您只是将函数作为回调函数传递，以在单击事件发生时触发，而没有其他参数。请确保预先绑定！

总结一下。考虑如何优化代码很不错，每种方法都有一个实用工具/目的取决于您的需求。