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

如果函数是在组件外部定义的，则它无法使用有用的动态值，否则可以在组件内部轻松引用这些值。最重要的是，状态和道具 - 外部函数不会具有内部定义的标识符的范围。

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

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

那么在组件之外定义它就完全没问题（并且比不必要的复杂化更可取useCallback）