javascript - react Hook useCallback 没有依赖

Question

对于简单的事件处理程序，使用没有 deps 的 useCallback 是否有意义？

例如:

const MyComponent = React.memo(() => {
  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []);

  const handleOtherClick = () => {
    console.log('clicked');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <button onClick={handleOtherClick}>Click me too</button>
    </div>
  );
});

在这种情况下使用 useCallback 的优缺点是什么？

Answer 1

useCallback 的用途不取决于您是否有依赖项。这是为了确保参照完整性。以获得更好的性能。如果你需要的话。

因为对于只有函数或函数表达式本身的流来说，代码运行良好(我的意思是它不需要我们做任何额外的 Action 来引用实际的 Prop 等)。所以 useCallback 只与性能有关。

假设我们渲染纯组件(React.PureComponent 的实例或包装在 React.memo 中的功能组件)

function MyComponent() {
  const onChangeCallback = ...
  return <SomePureComponent onChange={onChangeCallback} />;
}

如果 onChangeCallback 被声明为函数或箭头表达式，它将在每次渲染时重新创建。所以它会有所不同。嵌套的 child 每次都会重新渲染，而不必这样做。

另一种情况是将此回调列为其他 useCallback、useMemo、useEffect 中的依赖项。

function MyComponent() {
  const onChangeCallback = ...;
  return <Child onChange={onChangeCallback} />
}

...
function Child({onChange}) {
  useEffect(() => {
    document.body.addEventListener('scroll', onChange);
    return () => document.body.removeEventListener('scroll', onChange);
  }, [onChange]);
}

这里我们还将在 Child 中有引用不同的 onChange 而没有 useCallback。因此 useEffect 将在每次调用父级 MyComponent 时运行。虽然我们不需要这样做。

所以是的，当您实际上没有任何依赖项时，拥有空的依赖项列表比在根本没有 useCallback 的情况下声明函数内联要好。