React Hooks - 如何避免在每次渲染时重新声明函数

Question

在反应课上，我会写这样的东西

class Myclass extends React.Component {
  handleUpdate = info => {
    //do the update
  }

  render() {
    return (
      <SomeMarkup>
        <SomeComponent onUpdate={this.handleUpdate} />
      </SomeMarkup>
    )
  }
}

如果使用函数，我可以只写以下内容

function MyFunction() {
  function handleUpdate(info) {
    // do the update
  }
  return (
    <SomeMarkup>
      <SomeComponent onUpdate={handleUpdate} />
    </SomeMarkup>
  )
}

...但是我会在每次渲染时重新声明一个函数。有没有什么技巧可以记住渲染之间的处理函数？或者我应该将处理程序移出渲染范围？（将它移出渲染范围需要我明确传递更多参数，因为我不会直接访问函数范围。）

Answer 1

这正是适用的场景useCallback。该函数仍然每次使用 with 声明useCallback，但返回的函数被记忆化，因此如果它作为属性传递给子级，子级将收到一致的函数，除非它因依赖项更改而必须更改。

请在此处查看我最近的相关答案，其中详细演示了如何useCallback工作： React Hooks useCallback 的简单示例遇到问题

这是另一个相关的答案：React Hooks useCallback 导致孩子重新渲染