如何解决为什么这里用的是 React.useCallback,而不是普通的函数?
我正在查看 documentation of fluentui 中的一个示例:
...
export const TextFieldControlledExample: React.FunctionComponent = () => {
const [firstTextFieldValue,setFirstTextFieldValue] = React.useState('');
...
const onChangeFirstTextFieldValue = React.useCallback(
(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,newValue?: string) => {
setFirstTextFieldValue(newValue || '');
},[],);
...
return (
...
<TextField
label="Basic controlled TextField"
value={firstTextFieldValue}
onChange={onChangeFirstTextFieldValue}
styles={textFieldStyles}
/>
...
);
};
为什么他们在这里使用 React.useCallBack 而不是普通函数?例如。有什么好记的?
解决方法
当您在组件上创建函数时,该函数将在该组件的每次重新渲染时重新创建。
当您应用 useCallback 时,您会记住该函数,从而避免在每次重新渲染时重新创建该函数。如果您的依赖项数组中的任何依赖项值发生更改,它只会创建一个新函数。
需要注意的是,如果您在记忆函数中引用某个状态,您可能会面临陈旧状态,从而导致不良行为。在这些情况下,使用带有回调函数的 setState
可以避免这个问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。