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

Question

在反应中class我会写这样的东西

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 仍会声明该函数，但返回的函数会被记忆，因此如果它作为属性传递给 children，children 将收到一个一致的功能，除非由于依赖关系的变化而必须改变。

请在此处查看我最近的相关回答，其中详细说明了 useCallback 的工作原理：

这是另一个相关的答案：

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

React Hooks - How to avoid redeclaring functions on every render

reactjs

react-hooks