React事件处理程序性能问题

Question

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

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

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

Answer 1

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

import React, { useCallback } from 'react';

const ExampleComponent = (props) => {
  const onClick = useCallback(() => {
    console.log('got clicked', props.name);
  }, [props.name]);

  return (
    <SomeOtherComponent onClick={onClick} />
  )
}