为什么这里用的是 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 可以避免这个问题。