在React Hook useCallback中，如何使用(a，b)

在React Hooks Doc中，它们提供了使用USECALLBACK REECT HONK的示例，如下所示：

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} />

这是钩子所取决于的值数组。当这些值发生变化时，它会导致钩子重新执行。如果您不通过此参数，则每次组件呈现时，挂钩都会评估。如果您通过[]，它将仅在初始渲染上进行评估。

有关此的文档可在此处找到：https：//reactjs.org/docs/hooks-reference.html#conditionally-firing-an-fect。

如果您确实传递了此参数数组，则包括所有可以更改并在挂钩闭合中引用的状态非常重要。如果您忘记包含某些内容，那么封闭中的价值将变为陈旧。有一个ESLINT规则检查此问题（链接讨论还包含更多详细信息）：https：//github.com/facebook/react/react/issues/14920。

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

这很有用，尤其是当您希望在onClick上调用某些东西，该CC_8需要从组件的道具中进行一些值。

与您的示例类似，而不是在每个渲染上创建一个新功能：

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} />;
}

这将确保创建新功能并仅在email或onSignup更改时传递给onClick。

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

创建一个

的函数时

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

在上述情况下，memoizedsignupCallback是在初始渲染上创建的，它将可以从封闭闭合创建时访问该值。如果您想访问其关闭中的值，但可以由于某种交互而更新，则需要重新创建记忆的回调，因此您将在参数中传递给Usecallback。

但是，在您的情况下

demo

相关内容

最新更新

热门标签：