Javascript 反应绑定问题和内存管理

我的问题是关于

react

的问题，您不应该在

render

函数中绑定函数，因为这将导致为每个

render

创建该函数的新实例，最终导致浏览器内存不足并崩溃

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

似乎，如果要将参数传递到函数中，必须创建一个新组件，或者使用箭头函数

（）=>

有鉴于此，在创建多个组件来执行此操作，或者接受有时必须在

render

函数中绑定这一点之间存在权衡

为了确定采用哪个选项，我假设您必须估计

render

函数中绑定的效果

因此，我试图准确地理解

render

函数中绑定过多的浏览器内存会发生什么情况

因此，我的问题如下：

当用户刷新页面时（例如在Chrome中按F5），绑定使用的所有内存都将被释放，这一假设是否正确？如果没有，什么时候释放内存

---

然后，如果

react

应用程序是单页应用程序，用户可能永远不会刷新页面-他们可能认为自己在更改页面，但事实上他们总是在同一页面上。如果是这种情况，是否还有其他点会释放内存？例如，如果用户在

react

应用程序中导航到不同的页面，它会释放内存吗？我问这个问题的原因是，如果

react

从未以这种方式释放内存，那么除非用户刷新页面，否则所有

react

应用程序最终不会因为这个原因崩溃吗？

您误解了箭头函数的实际上下文。没有。它从词法作用域（它上面的作用域）获取它使用的

this

。箭头函数不是“自动绑定”。使用箭头函数时，不会创建新实例，默认情况下，它们位于正确的范围内

但是使用普通函数和

bind

是一种非常有效的方法

就性能而言，在渲染函数中使用

bind

，所起的作用比您想象的要小得多。也就是说，避免这种情况的推荐方法是在

构造函数中预绑定函数。您将在安装时创建一个函数实例，之后再也不会创建（在组件的使用寿命内）

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

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

请注意，此语法实际上并不要求您在
构造函数中使用
bind
，因为它是一个箭头函数。但出于连续性的考虑，如果您打算绑定
构造函数中的所有方法，那么您最好避免任何混淆。
还可以检查这个关于如何避免在渲染中绑定函数的答案，比如：{this.someFunc（param）}/>？（如果我理解正确的话）@GiorgiMoniava这将导致相同的问题，因为您的（）=>函数本质上是绑定一个新的function@ShubhamKhatri只有在不向函数传递任何参数的情况下，您的解决方案才会起作用不，即使您想向函数传递参数，它也会起作用，这就是解决方案的目的，否则，您可以直接调用this.somefuncy。语法（）=>{}确实是一种动态声明新函数的方法，例如每次编写此代码时，您都在创建一个新函数？在这种情况下，每次出现在渲染中时，您都在创建一个新函数？另外请注意，您的答案并没有回答我的问题，它完全回答了一个不同的问题。我问的是在使用时是否释放了浏览器内存react@Alex我看它现在不回答了。我只谈问题本身的一切。请记住，事件侦听器函数是回调函数。即使使用
onClick={this.myFunc}
也是回调。你只是没有明确地说出来。因此，arrow函数和
bind
之间的区别在于，arrow函数创建回调函数，与bind相反，它创建回调函数和函数的新实例
<button onClick={(e) => this.myFunc.call(this, e)></button>

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