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

Question

我注意到我的 React 项目中有一个有趣的问题。我已经按照第一种方法解决了这个问题，但我想知道以下回调方法在作为道具传递时的区别：

1.箭头函数（在render()内工作正常）

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

2。函数引用（未捕获的范围错误：超出最大调用堆栈大小）

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

Answer 1

首先是一个函数定义，你告诉它给"perform this function on change"。重要的一句话是'definition'：你不执行它，你定义它。它没有 'start' 命令：

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

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

showImage={ this.shouldImageBeShown() }

将立即调用该函数以确定我们是否应该显示图像，并且 returns true/false -> showImage={true}.

如果你想在不触发的情况下输入函数名，你可以删除函数的 () 部分，这样它就不会被调用，只会被声明：

changeImage={ this.openImageUploadModal }

Answer 2

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

这意味着 "call handleImageUploadModal immediately, and pass its return value into the changeImage prop"。我猜 handleImageUploadModal 调用了 setState，这意味着组件将重新渲染并重复此过程。

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

这意味着 "create a function with the text () => this.handleImageUploadModal('OPEN') and pass it into the changeImage prop"。新创建的函数（还）没有被调用，但是可以在组件认为有必要的时候调用。

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

Immediately invoked arrow function as a react prop

javascript

function

reactjs

arrow-functions