javascript - 带有函数的“React Hook useEffect 缺少依赖项”警告

Question

所以我有这个使用 useEffect() 钩子(Hook)的 React 组件:

const [stateItem, setStateItem] = useState(0);

useEffect(() => {
  if (condition) {
    myFunction();
  }
}, [stateItem]);

const myFunction = () => {
  return 'hello';
}

React 警告我“myFunction”是一个缺失的依赖项。我(想我)理解为什么并且我已经阅读了许多类似的问题，要求或多或少相同的东西，但答案总是“将你的函数移动到 useEffect 钩子(Hook)中”。如果不是从不同的地方调用 myFunction 就可以了，例如:

...
return (
  <Button onClick={() => myFunction()} />
);

因此我不能将我的函数放在 useEffect Hook 中。

类似问题的一个答案是将函数放在组件之外，但这需要我将大量数据传递给我的函数，例如 const myFunction(stateItem, setStateItem, someProp) => { stuff };
当有多个函数需要传递许多 Prop 、状态钩子(Hook)等时，这会变得非常乏味。

除了在 useEffect 钩子(Hook)上方放置一个 linter 忽略注释之外，还有什么更实际的做法吗？我发现这些东西使使用 react 钩子(Hook)非常不切实际。

Answer 1

我有这方面的问题。

React 总是试图让你的效果保持最新。 如果你不传递依赖数组，React 将在每次渲染后运行该效果，以防万一。

这将在每个渲染上运行

useEffect(()=> {
  // DO SOMETHING
});

如果你传递一个空数组，你基本上是在告诉你的效果不依赖于任何东西，并且只运行一次是安全的。

这只会运行一次

useEffect(()=> {
  // DO SOMETHING
},[]);

如果你填充依赖数组，你就是在告诉你的效果依赖于那些特定的东西，如果它们中的任何一个发生变化，效果需要再次运行，否则，它不必。

这只会在 someProp 时运行或 someFunction变化。

useEffect(()=> {
  // DO SOMETHING
},[someProp,someFuction]);

注意:记住函数、对象和数组是通过引用进行比较的

所以，基本上你的选择是:

将函数移动到效果的主体。

添加它做依赖数组

如果选择将其添加到数组中，则需要确定以下内容:

如果该功能被修改，您是否需要再次运行效果？

如果这是真的，只需将它添加到依赖数组中，React 就会在每次该函数更改时重新运行您的效果。

如果不是这样，将你的函数包装成 useCallback所以你可以在渲染中保持它的引用相同。您还可以将依赖数组添加到 useCallback控制何时需要重新创建函数。

额外 该函数需要重新创建，但您不想重新运行。

使用 useRef() 添加一些变量跟踪效果是否已运行一次，并在效果中写入检查以停止效果(如果之前已运行)。喜欢:

const effectHasRun_ref = useRef(false);
useEffect(()=>{
  if (effectHasRun_ref.current === true) {
    return;
  }
  else {
    // RUN YOUR EFFECT
    effectHasRun_ref.current = true;
  }
},[yourFunction]);