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 确实不需要每次都创建 - 它只需要创建一次 - handler 函数，

() => someOtherFn(setState)

将在每次组件呈现时创建，这在某些不常见的 (IMO) 情况下可能是个问题。

为避免此问题，您必须以某种方式将 setState 参数持久绑定到函数 - 通过使用 useCallback.

最容易实现

useCallback 钩子和空依赖数组之间的区别，只是在组件外部定义一个函数

Difference between useCallback hook and empty dependency array and just defining a function outside of the component

reactjs

usecallback