javascript - react 绑定(bind)问题和内存管理

Question

我的问题是关于 react 的问题，你不应该在 render 函数中绑定(bind)一个函数，因为这会导致该函数的一个新实例为每个 render 创建，最终导致浏览器内存不足并崩溃。

根据我对这个问题的回答:

Create function that can pass a parameter without making a new component

似乎如果你想将一个参数传递给一个函数，你要么必须制作一个新组件，要么基本上使用箭头函数 ()= 绑定(bind)到 render 函数中>

鉴于此，在创建许多组件来执行此操作或接受您有时必须绑定(bind)到 render 函数之间存在权衡。

为了确定采用哪个选项，我假设您必须估计 render 函数中绑定(bind)的效果。

因此，我试图准确了解在 render 函数中绑定(bind)过多时浏览器内存会发生什么情况。

所以我的问题如下:

我假设当用户刷新页面(例如在 Chrome 中按 F5)时绑定(bind)所用的任何内存都将被释放，我是否正确？如果没有，什么时候释放内存？

然后，考虑到 react 应用程序是单页面应用程序，用户可能永远不会真正刷新页面 - 他们可能认为他们正在更改页面，但实际上他们始终在同一页面上。如果是这种情况，是否有任何其他点可以释放内存 - 例如，如果他们的用户导航到 react 应用程序中的不同页面，它会释放内存吗？我问的原因是因为如果 react 永远不会以他的方式释放内存，那么除非用户刷新他们的页面，否则所有 react 应用程序不会因此而最终崩溃吗？

Answer 1

您误解了箭头函数的上下文实际上是什么。它没有。它从词法作用域(它上面的作用域)获取它使用的 this。箭头函数不是“自动绑定(bind)”的。当您使用箭头函数时，您不会创建新实例，并且默认情况下它们在适当的范围内。

但是使用普通函数和 bind 是一种完全有效的方法。

在性能方面，在你的渲染函数中使用 bind 比你想象的要少得多。话虽这么说，但推荐的规避方法是在 constructor 中预绑定(bind)函数。您将在挂载时创建该函数的一个实例，之后再也不会创建(在组件的生命周期内)。

constructor(props) {
    super(props)
    this.state = {}
    this.myFunc = this.myFunc.bind(this)
}

您显示的链接中描述的问题不存在，涉及事件处理程序内部的参数传递。 OP 无故使用 call。

<button onClick={(e) => this.myFunc.call(this, e)></button>

call 根本不需要。在构造函数中使用 bind 后，它看起来像这样:

<button onClick={(e) => this.myFunc(e)></button>

请注意，此语法实际上不需要您在 constructor 中使用 bind，因为它是一个箭头函数。但是为了连贯性，如果您要在 constructor 中绑定(bind)所有方法，您最好避免在您的终端出现任何混淆。