反应挂钩 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 的目的不取决于您是否有依赖项。这是为了确保参照完整性。以获得更好的性能。如果你需要的话。

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

假设我们渲染纯组件（React.PureComponent 的实例或包裹在 React.memo 中的功能组件）

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

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

另一种情况是将此回调列为其他 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。所以每次调用父 MyComponent 时，useEffect 将是运行。虽然我们不需要这样做。

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

反应挂钩 useCallback 没有依赖

React hook useCallback without dependencies

javascript

reactjs

react-hooks