React 事件处理程序性能问题

Question

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

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

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

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} />
  )
}