javascript - React中反向数据流中bind(this)的使用

Question

这个问题已经有答案了:

Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class (5 个回答)

已关闭 6 年前。

我正在阅读《Thinking in React》文档:https://facebook.github.io/react/docs/thinking-in-react.html

文档最后部分https://facebook.github.io/react/docs/thinking-in-react.html#step-5-add-inverse-data-flow ，我无法理解bind(this)的使用以及它是如何工作的。具体来说，我试图理解:

为什么我们在 SearchBar 组件中需要这两行:

this.handleFilterTextInputChange = this.handleFilterTextInputChange.bind(this);
this.handleInStockInputChange = this.handleInStockInputChange.bind(this);

FilterableProductTable 组件中的以下两行:

this.handleFilterTextInput = this.handleFilterTextInput.bind(this);
this.handleInStockInput = this.handleInStockInput.bind(this);

如果我们不进行这些绑定(bind)会发生什么？

我已经阅读了 JavaScript 绑定(bind)函数的文档以及我在 Google 上找到的一些关于反向数据流的示例，但仍然无法理解它。

如果有人可以解构数据流以及什么this，我将不胜感激在每个实例中都指的是。

Answer 1

bind 调用返回一个新函数，该函数将调用绑定(bind)函数，并将 this(上下文)设置为给定值。如果您进一步遵循该示例，您会发现这两个函数作为回调方法/事件处理程序提供给子组件。

如果没有绑定(bind)，子组件必须确保使用正确的上下文(其父组件)调用回调。这会不必要地耦合这些组件，并给开发人员带来沉重负担，让他们不能忘记这一点。

如果父组件将回调绑定(bind)到自身，它可以确保子组件(应该使用回调)不必知道这一点，只需调用回调即可。