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

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

此语法（箭头函数）的问题在于每次呈现

LoggingButton

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

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

用于记忆函数。useCallback的第二个参数用于指定哪些变量应导致重新创建函数。如果其中一个发生更改，将创建一个新回调，但在其他情况下，将重用相同的函数引用。如果您不想创建新函数，那么作为第二个参数的空数组就可以做到这一点

import React, { useCallback } from 'react';

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

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

import React，{useCallback}来自“React”；
常量示例组件=（道具）=>{
const onClick=useCallback（（）=>{
console.log（'got clicked'，props.name）；
}，[props.name]）；
返回(
)
}

如何使用跳过官方文档第一页的功能组件