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的用途。该函数仍然每次使用useCallback声明，但返回的函数是memoized，因此如果它作为属性传递给子节点，则子节点将接收一致的函数，除非由于依赖关系更改而必须更改。

请参阅我最近的相关答案，详细说明useCallback的工作原理：Trouble with simple example of React Hooks useCallback

这是另一个相关的答案：React Hooks useCallback causes child to re-render