reactjs - 为什么这里使用 React.useCallback，而不是普通函数？

Question

我正在查看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 而不是普通函数？例如，有什么要记住的？

Answer 1

当您在组件上创建一个函数时，该函数将在该组件的每次重新渲染时重新创建。

当您应用useCallback时，您会记住该函数，从而避免在每次重新渲染时重新创建该函数。仅当您的依赖项数组中的任何依赖项值发生更改时，它才会创建一个新函数。

重要的是要注意，如果您在记忆函数中引用某些状态，您可能会面临陈旧状态，从而导致不良行为。在这些情况下，使用setState带有回调函数的 a 可以避免该问题。