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声明该函数，但是返回的函数会被记忆，以便将其作为属性传递给子代，除非由于依赖关系更改而必须更改，否则子代将收到一致的函数。 / p>

请在此处查看我最近的相关答案，详细说明useCallback的工作方式： Trouble with simple example of React Hooks useCallback

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

React Hooks-如何避免在每个渲染器上重新声明函数

1 个答案: