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

Question

在 react 课上我会写这样的东西

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 进行声明，但返回的函数会被内存，因此，如果将其作为属性传递给子级，则子级将收到一致的函数，除非它由于依赖关系而必须更改改变。

请参阅我最近的相关答案，其中详细演示了 useCallback 的工作原理: Trouble with simple example of React Hooks useCallback

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