反应钩子 useCallback 没有依赖答案

【问题标题】：React hook useCallback without dependencies反应钩子 useCallback 没有依赖
【发布时间】：2019-07-31 15:44:01
【问题描述】：

将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 的优缺点是什么？

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案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]);
}

在这里，在没有 useCallback 的情况下，Child 中的 onChange 也将具有引用性不同的 onChange。所以每次调用父级MyComponent 时都会运行useEffect。虽然我们不需要它这样做。

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

【讨论】：