Question

在react hooks文档中，他们给出了使用useCallback React hook的示例，如下所示：

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

我有一个示例，该示例具有使用参数（不是a或b）调用的回调，并且似乎可以正常工作。请向我解释a，b是什么以及如何使用它们。下面是我使用回调的工作代码。

const signupCallback = email => {
  return console.log(`sign up called with email ${email}`);
};

const memoizedsignupCallback = useCallback(() => {
  signupCallback();
}, []);

以及使用回调的呼叫。

<SignMeUp signupCallback={memoizedsignupCallback} />

Answer 1

这是挂钩依赖的值的数组。当这些值更改时，它将导致挂钩重新执行。如果不传递此参数，则挂钩将在每次组件渲染时进行评估。如果您传入[]，它将仅在初始渲染时评估。

与此相关的文档可在这里找到：https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect。

如果确实传递了此参数数组，则包含所有可以更改的状态以及在钩子闭包中引用的所有状态非常重要。如果您忘记包含某些内容，则闭包中的值将变得过时。有一个eslint规则可以检查此问题（链接的讨论中也包含更多详细信息）：https://github.com/facebook/react/issues/14920。

Answer 2

参数a, b的使用取决于您尝试执行的函数是否将它们从封闭范围中取出。

创建类似函数时

const signupCallback = email => {
  return console.log(`sign up called with email ${email}`);
};

const memoizedsignupCallback = useCallback(() => {
  signupCallback();
}, []);

在上述情况下，memoizedsignupCallback是在初始渲染时创建的，并且在创建时可以访问封闭的闭包中的值。如果您想访问位于其闭包内但由于某些交互作用而可以更新的值，则不是这样，您需要重新创建已记忆的回调，因此将参数传递给useCallback。

但是，在您的情况下，memoizedsignupCallback使用的值在执行方法时由调用方传递，因此它可以正常工作

DEMO

Answer 3

您是正确的，因为useCallback用于记忆功能。您可以将a和b（或useCallback的第二个参数中使用的任何东西）视为记忆功能的键。 a或b更改时，将创建一个新功能。

这特别有用，特别是当您希望在onClick上调用某些需要组件属性的值的东西时。

类似于您的示例，而不是在每个渲染器上创建新函数：

const Signup = ({ email, onSignup }) => {
  return <button onClick={() => onSignup(email) } />;
}

您将使用useCallback：

const Signup = ({ email, onSignup }) => {
  const onClick = useCallback(() => onSignup(email), [email, onSignup]);
  return <button onClick={onClick} />;
}

这将确保仅在onClick或email发生更改的情况下，才能创建新函数并将其传递给onSignup。

在React Hook useCallback中，如何使用（a，b）

3 个答案: