useCallback的替代方案

Question

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

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

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

Answer 1

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

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

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

那么在组件外部定义它是非常好的(并且比useCallback不必要的复杂性更可取)