立即调用的箭头函数作为一个反应道具

Question

我注意到我的React项目中有一个有趣的问题。我已经通过遵循第一种方法解决了该问题，但我希望知道以下两种回调方法之间的区别（作为道具传递时）：

1。箭头功能（在render()内部正常工作）

    changeImage={ () => this.handleImageUploadModal('OPEN') }

2。函数参考（未捕获的RangeError：超出最大调用堆栈大小）

    changeImage={ this.handleImageUploadModal('OPEN') }

Answer 1

第一个是函数定义，您告诉它“在更改时执行此函数”。重要的词是“定义”：您不执行它，而是定义它。它没有'start'命令：

changeImage={ () => {return this.handleImageUploadModal('OPEN')}() }
// If you want it called instantly, you have to start it:     --^^

---

您应该阅读的第二个参数。一个更明显的例子：

showImage={ this.shouldImageBeShown() }

该函数将立即调用以确定是否显示图像，并返回true / false-> showImage={true}。

如果您不想在不触发函数名的情况下输入函数名，则可以删除该函数的()部分，以便仅在声明时不调用它：

changeImage={ this.openImageUploadModal }

Answer 2

changeImage={ this.handleImageUploadModal('OPEN') }

这意味着“立即调用handleImageUploadModal，并将其返回值传递给changeImage属性”。我猜到handleImageUploadModal会调用setState，这意味着该组件将重新呈现，并且此过程将重复。

changeImage={ () => this.handleImageUploadModal('OPEN') }

这意味着“使用文本() => this.handleImageUploadModal('OPEN')创建一个函数并将其传递到changeImage属性中”。尚未调用新创建的函数，但是只要组件认为有必要，就可以调用该函数。