反应事件处理程序性能问题

Question

关于将箭头函数与绑定到this的类方法用于事件处理程序，React的正式文档如下：

  

此语法（箭头功能）的问题在于，每次LoggingButton（示例组件）呈现时都会创建一个不同的回调。在大多数情况下，这很好。但是，如果将此回调作为对较低组件的支持传递，则这些组件可能会进行额外的重新渲染。通常，我们建议在构造函数中进行绑定或使用类字段语法进行绑定，以避免此类性能问题。

由于新方法建议使用函数组件而不是类，因此我们如何解决上述性能问题？

Answer 1

使用useCallback记住该功能。 useCallback的第二个参数使您可以指定应该导致重新创建函数的变量。如果其中之一发生更改，将创建新的回调，但否则将重复使用相同的函数引用。如果您不想创建新函数，则可以使用一个空数组作为第二个参数。

const formData = new FormData();
formData.append('id',profileExtraData.id);
formData.append('fullName', profileExtraData.fullName);
formData.append('file', profileExtraData.file);

return this.httpClient.post<void>(`${this.apiBaseUrl}/save`, formData);