useCallback 钩子和空依赖数组与仅在组件外部定义函数之间的区别

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）情况下可能会出现问题。

为了避免这个问题，您必须以setState某种方式将参数持久地绑定到函数 - 这可以通过使用最轻松地完成useCallback。