javascript - 缺少依赖项 : 'prop' when calling `prop.function` in `useEffect` but no warning when reading `prop.variable`

Question

当我将 prop.value 添加到 DependencyList 时，没有任何警告。

但是当我将 prop.func 添加到 DependencyList 时出现一个警告

React Hook useEffect has a missing dependency: 'prop'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps)

DependencyList 中的变量和函数似乎不同，这是为什么？我应该将 prop 添加到 useEffect 中的 DependencyList 吗？

function Box(prop) {
  useEffect(() => {
    console.log(prop.value);
  }, [prop.value]);

  useEffect(() => {
    prop.func();
  }, [prop.func]);
     //^  React Hook useEffect has a missing dependency: 'prop'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps)

  return <div></div>;
}

function App() {
  return (
    <Box
      func={() => {
        console.log("function");
      }}
      value={"value"}
    ></Box>
  );
}

https://codesandbox.io/s/react-useeffect-issue-6m5kxg?file=/src/index.js

Answer 1

linter 会提示，因为 prop.func() 是一个在 prop 对象上下文中运行函数的方法调用。考虑一下

<Box
  func={function() {
    console.log(this.value);
  }}
  value={"value"}
/>

这将记录“value”，并且可能应该在prop.value更改时再次记录，而不仅仅是在prop.func更改时。您可以通过在效果中不使用方法语法来解决此问题:

useEffect(() => {
  const f = prop.func;
  f();
}, [prop.func]);

或

useEffect(() => {
  const {func} = prop;
  func();
}, [prop.func]);

或

const {func} = prop;
useEffect(() => {
  func();
}, [func]);