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

Question

在react hooks doc中，他们举了一个如下使用useCallback React钩子的例子：

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

你是正确的，因为useCallback用于记忆功能。您可以将a和b（或useCallback的第二个参数中使用的任何内容）视为memoized函数的关键。当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发生变化时才会创建新函数并将其传递给a, b。

Answer 3

参数

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

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

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

当你创建一个像这样的函数

memoizedsignupCallback

在上面的例子中，memoizedsignupCallback是在初始渲染时创建的，它可以在创建时访问封闭闭包中的值。如果您想要访问其闭包内但由于某些交互而可以更新的值，则需要重新创建memoized回调，因此您可以将参数传递给useCallback。

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

qazxswpoi