reactjs - useCallback hook 和空依赖数组之间的区别，只是在组件外定义一个函数

Question

在 React 中，我们可以使用 useCallback 记住一个函数，这样函数就不会在每次重新渲染时改变

const fn = useCallback(someOtherFn, []);

相反，我们可以定义 someOtherFn在组件外部，如果它使用 setState，我们将其作为参数提供给它？
就像是

function someOtherFn(setState) {
    setState("ok")
}

function myComponenet(){
......
}

如果这是一个愚蠢的问题，请提前抱歉。

Answer 1

您可以这样做，但它可能会破坏目的，因为您必须编写另一个调用它的函数，并且每次渲染都会创建另一个函数。例如，也许您正在考虑:

function someOtherFn(setState) {
    setState("ok")
}
const MyComponent = () => {
  const [state, setState] = useState();
  return <button onClick={() => someOtherFn(setState)}>click</button>;
};

虽然 someOtherFn确实不需要每次都创建 - 它只需要创建一次 - 处理程序函数，

() => someOtherFn(setState)

每次渲染组件时都会创建，这在某些不常见 (IMO) 情况下可能是一个问题。
为避免此问题，您必须绑定(bind) setState以某种方式持续传递给函数的参数 - 这可以通过使用 useCallback 最容易实现.