在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} />
这是钩子所依赖的值数组。当这些值改变时,它会导致钩子重新执行。如果未传递此参数,则每次组件呈现时都会对钩子进行求值。如果你传入[]
,它只会评估初始渲染。
有关此内容的文档可在此处获取:https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect。
如果确实传递了这个参数数组,那么包含可以更改并在钩子闭包中引用的所有状态非常重要。如果您忘记包含某些内容,则闭包中的值将变得陈旧。有一个用于检查此问题的eslint规则(链接的讨论还包含更多详细信息):https://github.com/facebook/react/issues/14920。
你是正确的,因为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
。
参数const signupCallback = email => {
return console.log(`sign up called with email ${email}`);
};
const memoizedsignupCallback = useCallback(() => {
signupCallback();
}, []);
的使用取决于您尝试执行的函数是否从封闭范围中获取它们。
当你创建一个像这样的函数
memoizedsignupCallback
在上面的例子中,memoizedsignupCallback
是在初始渲染时创建的,它可以在创建时访问封闭闭包中的值。如果您想要访问其闭包内但由于某些交互而可以更新的值,则需要重新创建memoized回调,因此您可以将参数传递给useCallback。
但是在你的情况下,DEMO使用的值在执行方法时由调用者传递,因此它可以正常工作
qazxswpoi