你需要显式绑定一个函数吗？

Question

当我将函数传递给我使用的组件时，我有一个名为multiply的函数和一个名为NumberInputField的组件：

<NumberInputField id='1' action={this.multiply} />

但我也看到了：

<NumberInputField id='1' action={this.multiply.bind(this)} />

他们似乎都工作。有区别吗？一种方式更容易接受吗？

Answer 1

当你bind一个函数时，你正在给你当前所在类的函数上下文。例如，如果multiply()函数需要使用this.setState()那么您需要使用bind，以便该函数具有适当的上下文。

但是，在渲染方法中使用bind并不是一个好主意。为什么？因为每次调用render时，bind都会再次出现。相反，您可以在构造函数中绑定函数

e.g。

constructor() {
    super();
    this.multiply = this.multiply.bind(this);
}

更好的是，如果你使用babel的变换类属性插件，你可以像这样写你的函数

export default class App extends Component {

    multiply = () => {
       //Automatically knows about "this"
    };

}

虽然有些答案会注意到如果您应该在该功能中访问“this”，则只需要它。了解最佳实践也很重要。在render方法中不绑定。

Answer 2

编辑：

这取决于功能的作用。如果你需要访问状态，道具等，那么你需要绑定它。最佳实践是将其创建为箭头函数或将其绑定在构造函数中。

如果没有，那么没有。但是，最佳做法是将该函数移动到辅助文件中，以便将来可以再次使用它，如果它是可重用的函数。