时间戳

首页 > 解决方案 > React Hooks - 如何避免在每次渲染时重新声明函数

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

问题描述

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

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>
  )
}

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

标签： reactjsreact-hooks

解决方案

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

请在此处查看我最近的相关答案，详细演示如何useCallback工作： Trouble with simple example of React Hooks useCallback

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

推荐阅读