在 React.memo 中需要 useCallback 吗？

Question

考虑这个例子：

import React, { useCallback } from 'react';

type UserInputProps = {
  onChange: (value: string) => void;
};

const UserInput = React.memo(({ onChange }: UserInputProps) => {
  // Is this `useCallback` redundant?
  const handleChange = useCallback(
    (event) => {
      onChange(event.target.value);
    },
    [onChange]
  );

  return <input type="text" onChange={handleChange} />;
});

export default UserInput;

我的问题是：

1. 当 props 只包含onChange而不包含其他元素时，useCallback在这种情况下是不必要的，因为整个组件已经基于onChange?
2. 如果我们添加一个额外的道具（比如 avalue的初始值<input>），那么我认为useCallback变得有用，因为否则handleChange即使onChange不改变但value被改变也会重新创建。那是对的吗？

Answer 1

当 props 只包含onChange而不包含其他元素时，useCallback在这种情况下是不必要的，因为整个组件已经基于onChange?

它基于所有道具记忆，而不仅仅是onChange. 是的，useCallback那里是不必要的。

如果我们添加一个额外的道具（比如 avalue的初始值<input>），那么我认为useCallback变得有用，因为否则handleChange即使onChange不改变但值改变也会重新创建。那是对的吗？

如果你想在更新时更新value而不是更新，你可以添加到你的 props 并继续使用你的（如果你愿意，这样 React 在设置值时就不必交换新的事件处理程序；我的印象是这通常是矫枉过正）。例如：onChangeinputvalueuseCallbackhandleChange

const UserInput = React.memo(({ onChange, value }: UserInputProps) => {
  const handleChange = useCallback(
    (event) => {
      onChange(event.target.value);
    },
    [onChange]
  );

  return <input type="text" value={value} onChange={handleChange} />;
});

如果道具没有改变，那将使用最新的value并重用以前handleChange的onChange。

你可能不保持React.memo在这种情况下，如果你期待的是value将得到改变的结果onChange。也就是说，如果您希望每次调用组件时的常见情况value 都会有所不同，那么React.memo对 props 的检查是您可能不会保留的额外工作：

const UserInput = ({ onChange, value }: UserInputProps) => {
  const handleChange = useCallback(
    (event) => {
      onChange(event.target.value);
    },
    [onChange]
  );

  return <input type="text" value={value} onChange={handleChange} />;
};

但是如果你想React.memo继续检查 props 并且在 props 都没有改变时不调用你的函数，你可以保留它。

如果您只想为组件提供初始值，然后在本地控制它，您可以继续使用React.memo（因为它仍然为相同的输入道具呈现相同的东西），在这种情况下，您不需要useCallback：

const UserInput = React.memo(({ onChange, initialValue }: UserInputProps) => {
  const [value, setValue] = useState(initialValue);
  const handleChange = (event) => {
    setValue(event.target.value);
    onChange(event.target.value);
  };

  return <input type="text" value={value} onChange={handleChange} />;
});

这只会在onChange或initialValue更改时被调用。你可以使用也useCallback有为了，同样，只有更新onChange的input时候onChange道具的变化，以避免阵营删除旧的处理程序，并设置新时只是value变化：

const UserInput = React.memo(({ onChange, initialValue }: UserInputProps) => {
  const [value, setValue] = useState(initialValue);
  const handleChange = useCallback(
    (event) => {
      setValue(event.target.value);
      onChange(event.target.value);
    },
    [onChange]
 );

  return <input type="text" value={value} onChange={handleChange} />;
});

旁注：要记住的一件事是，handleChange每次调用组件函数时都会创建一个新函数，即使您使用useCallback. 它必须是，所以它可以useCallback作为参数传递。唯一的区别是您是使用那个新函数，还是第一次创建的原始函数（ 的结果useCallback）。我认为重用为给定的一组依赖项创建的第一个的原因是为了最小化传递给子组件的更改。