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

Question

我的问题是关于 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)新函数？

Answer 1

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

所以问题不在于绑定(bind)，而在于你需要传递一个引用，而引用不能接收参数。

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