Question

2019-10-28

706

javascript reactjs function arrow-functions

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

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:     --^^

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

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 属性中”。新创建的函数尚未被调用（目前），但可以在组件认为必要时随时调用。