javascript - 创建可以传递参数而无需创建新组件的函数

我的问题与 React 在渲染函数中绑定(bind)函数的问题有关。

以下不是好的做法:

render() {
   <div onClick={this.callFunction.bind(this)}/>
}

因为每次重新渲染都会向页面添加新功能，最终导致浏览器内存不足。

解决方案是这样做:

constructor() {
   this.callFunction = this.callFunction.bind(this);
}

render() {
   <div onClick={this.callFunction}/>
}

问题是当我想将一个值传递给函数时。

我知道我可以使 div 成为子组件，并通过回调传递参数，但如果 div 在整个应用程序中只使用一次，这似乎不明智。我承认我可以完成这项工作，但这不是这个问题的范围。

我也知道这个解决方案:

render() {
   <div onClick={() => this.callFunction.call(this, param)}/>
}

也好不到哪里去，因为它仍在创建一个新函数。

所以我的问题是，如何创建一个可以将参数传递给其中的函数，而无需创建新组件，并且无需在每个渲染上绑定(bind)新函数？

最佳答案

您无法避免创建第二个组件，因为您需要传递函数引用作为事件处理程序，这将在事件触发时由浏览器执行。

所以问题不在于绑定(bind)，而在于您需要传递引用，而引用无法接收参数。

编辑
顺便说一句，如果您不喜欢绑定(bind)或匿名箭头函数的语法和噪音，您可以使用柯里化(Currying)。
我在 different question 中发布了一个示例如果你觉得有趣。但这并不能解决问题，这只是传递新引用的另一种方法(我发现它是最简洁的)

关于javascript - 创建可以传递参数而无需创建新组件的函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46240501/