立即调用箭头功能作为反应道具

Question

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

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

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

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

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

Answer 1

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

, =

---

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

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

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

如果您想在不触发函数名的情况下输入该函数名，则可以删除该函数的showImage={true}部分，以使其不被调用而仅被声明：

()

Answer 2

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

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

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

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