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

问题描述 投票:1回答:3

在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} />
reactjs react-hooks
3个回答
1
投票

这是钩子所依赖的值数组。当这些值改变时,它会导致钩子重新执行。如果未传递此参数,则每次组件呈现时都会对钩子进行求值。如果你传入[],它只会评估初始渲染。

有关此内容的文档可在此处获取:https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect

如果确实传递了这个参数数组,那么包含可以更改并在钩子闭包中引用的所有状态非常重要。如果您忘记包含某些内容,则闭包中的值将变得陈旧。有一个用于检查此问题的eslint规则(链接的讨论还包含更多详细信息):https://github.com/facebook/react/issues/14920


1
投票

你是正确的,因为useCallback用于记忆功能。您可以将ab(或useCallback的第二个参数中使用的任何内容)视为memoized函数的关键。当ab改变时,会创建一个新函数。

这在你想要在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

这将确保只有在emailonSignup发生变化时才会创建新函数并将其传递给a, b


0
投票

参数const signupCallback = email => { return console.log(`sign up called with email ${email}`); }; const memoizedsignupCallback = useCallback(() => { signupCallback(); }, []); 的使用取决于您尝试执行的函数是否从封闭范围中获取它们。

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

memoizedsignupCallback

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

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

qazxswpoi

© www.soinside.com 2019 - 2024. All rights reserved.