替代使用回调答案

【问题标题】：Alternative to useCallback替代使用回调
【发布时间】：2021-08-14 22:49:11
【问题描述】：

对不起，如果这是一个愚蠢的问题，我是 JavaScript 和 React 的新手。需要 UseCallback 来包装一个回调函数以避免重新创建该函数，因为它是在一个功能组件中定义的，该组件在每次状态更改时都会重新运行。为什么不直接在函数组件之外定义回调来避免这个问题呢？

// define handleClick here instead?
// const handleClick ...

function MyComponent() {
  // handleClick is re-created on each render
  const handleClick = () => { console.log('Clicked!'); };
}

【问题讨论】：

该函数将如何使用道具和状态？
组件重新渲染时重新定义函数有什么问题吗？

标签： javascript reactjs scope

【解决方案1】：

如果函数是在组件外部定义的，它就不能使用在组件内部很容易引用的有用动态值。最重要的是，state 和 props - 外部函数不会有 scope 内部定义的标识符。

如果函数不需要任何这样的动态值 - 举个愚蠢的例子：

function alertError() {
  alert('There was an error');
}

然后在组件之外定义它是非常好的（并且比useCallback的不必要的复杂性更可取）

【讨论】：