reactjs - 将函数传递给 UseEffect 是否有效？可以这样做来代替 useCallback 吗？

Question

可以说我这样做

// Get a hook function
const {
  useState,
  useEffect
} = React;

const Example = ({
  title
}) => {
  const [formVal, setFormVal] = useState("")
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1)

  // now use increment as just the cb for useeffect
  useEffect(increment, [formVal])

  return ( <
    div >
    <input onChange={(e) => setFormVal(e)} placeholder="test"/>
    <
    p > {
      title
    } < /p> <
    p > You interacted {
      count
    }
    times < /p> <
    button onClick = {
      increment
    } >
    Click me <
    /button> < /
    div >
  );
};

// Render it
ReactDOM.render( <
  Example title = "Example using Hooks:" / > ,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

而不是调用 increment useEffect 的内部匿名回调，我只是将整个事情作为第一个参数。我的问题是，这是否消除了包装 increment 的需要？变成一个useCallback？

请注意，这是一个 super 人为的例子，我们假设这里同时发生了其他重新渲染，目标是没有无用的提交或重新渲染。

Answer 1

useEffect 和 useCallback 是有区别的。

useEffect 在依赖数组改变时调用函数回调。当依赖数组改变时，useCallback 用 newclosure 重新创建函数。 useCallback 也返回一个函数 useEffect 没有

因此，即使您可以将增量传递给 useEffect 以实际执行该函数，它也不等同于 useCallback，其中该函数只是在依赖数组更改时重新创建。在您的情况下，每个渲染上的按钮元素的增量函数引用将有所不同

实现上述代码的最佳方法是

// Get a hook function
const {
  useState,
  useEffect,
  useCallback
} = React;

const Example = ({
  title
}) => {
  const [formVal, setFormVal] = useState("")
  const [count, setCount] = useState(0);

  const increment = useCallback(() => setCount(prevCount => prevCount + 1), [])

  
  useEffect(increment, [formVal])

  return ( <
    div >
    <input onChange={(e) => setFormVal(e)} placeholder="test"/>
    <
    p > {
      title
    } < /p> <
    p > You interacted {
      count
    }
    times < /p> <
    button onClick = {
      increment
    } >
    Click me <
    /button> < /
    div >
  );
};

// Render it
ReactDOM.render( <
  Example title = "Example using Hooks:" / > ,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

此外，即使您将增量或普通回调传递给 useEffect，useEffect 用法的函数引用仅在依赖数组更改时才会更改