使用函数作为 useEffect 依赖项 -> "dependency 'props' missing"

Question

我的意图是使用一个函数（由父组件接收，使用 useCallback 创建）作为 useEffect 中的依赖项，并且仅在函数更改时触发该效果。

考虑以下简单组件：

function MyComponent(props) {
  const [myState, setMyState] = useState(0);

  useEffect(() => {
    setMyState(props.calculate(1));
  }, [props.calculate]) 

  return <h1>{myState}</h1>;
}

它在 props 中接收一个函数 calculate 并从中计算 myState。但是我得到了 linting 错误：

React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array.

我不明白为什么 props.calculate 作为依赖项不够，我们需要 props。我不想使用 props，因为那样效果会在每次渲染时重新触发，即使 calculate 没有改变。（假设 calculate 是在父级中使用 useCallback 创建的）。

以下版本没有任何 linting 错误：

function MyComponentVersion2(props) {
  const { calculate } = props;
  const [myState, setMyState] = useState(0);

  useEffect(() => {
    setMyState(calculate(1));
  }, [calculate]) 

  return <h1>{myState}</h1>;
}

我的问题是：

为什么 MyComponent 的 linter 不正常？
MyComponent 与 MyComponentVersion2 在语义上有区别吗？

我在这里做了一个最小的例子 codesandbox

谢谢！

Answer 1

这是因为调用 props.calculate(1) 隐式地将 props 作为 this 值传递给 calculate，所以从技术上讲，结果可能取决于整个 props对象（参见 this React issue）。对于解构的 calculate 调用，this 将是未定义的或全局对象，因此不依赖于 props.

您可以通过在 calculate 的定义中将 (x) => {return x + 1;} 替换为 function (x) {console.log(this); return x + 1;} 来查看两个组件之间的差异。

使用函数作为 useEffect 依赖项 -> "dependency 'props' missing"

Use functions as useEffect dependencies -> "dependency 'props' missing"

reactjs

react-hooks

use-effect

use-state