Javascript '；React Hook Useffect缺少依赖项'；带功能的警告

我有一个React组件，它使用useffect（）钩子：

React给了我一个关于“myFunction”缺少依赖项的警告。我（想我）明白为什么，我也读过很多类似的问题，问的都差不多，但答案总是“把你的函数移到useffect挂钩中”。如果不是从不同的位置调用myFunction，这将很好，例如：

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

。。。
返回(
myFunction（）}/>
);

因此，我不能将我的函数放在useffect钩子中

类似问题的一个答案是将函数放在组件之外，但这需要我向函数传递大量数据，例如。

constmyfunction（stateItem、setStateItem、someProp）=>{stuff}

当有很多道具、状态钩子等要传递的函数时，这会变得非常乏味

除了在useffect钩子上面放一个linter ignore注释外，还有什么更实际的方法可以做吗？我发现这些东西使得使用react钩子变得非常不切实际。
TLDR：将myFunction添加到依赖项数组，如下所示

React-useEffect有一个叫做依赖数组的东西，它基本上帮助您和React知道何时重新运行效果。基本上，您应该将定义的所有内容放在效果之外

在这个效果中，您将stateItem作为这个效果的依赖项，这意味着每次它更改时，react都将重新运行这个效果。现在，您可能已经猜到，您正在使用的是
myFunction
，它在效果之外定义得很好，这意味着react应该知道它何时更新，以便它知道。要修复此警告，只需将函数的依赖项数组中有一个项，如下所示

const[stateItem，setStateItem]=useState（0）；
useffect（（）=>{
如果（条件）{
myFunction（）；
}
}，[stateItem，myFunction]）；
常量myFunction=（）=>{
返回“你好”；
}
我对此有意见

React始终试图使效果保持最新。如果未传递依赖项数组，React将在每次渲染后运行该效果，以防万一

这将在每次渲染时运行

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

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

这将只运行一次

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

如果您填充依赖项数组，您告诉用户您的效果取决于这些特定的内容，如果其中任何内容发生更改，则需要再次运行该效果，否则就不必运行

只有当
someProp
或
someFunction
发生更改时，才会运行此操作。

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

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

因此，基本上你的选择是：


将函数移动到效果的主体
将其添加到依赖项数组中

如果选择将其添加到阵列中，则需要决定以下事项：

如果该函数被修改，是否需要重新运行效果？

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

如果这不是真的，将函数包装到一个
useCallback
中，以便在渲染过程中保持其引用相同。您还可以将依赖项数组添加到
useCallback
，以控制何时需要重新创建函数

EXTRA需要重新创建函数，但您不想重新运行


使用
useRef（）
添加一些变量，以跟踪效果是否运行过一次，并在效果中写入检查以停止效果（如果以前运行过）。比如：

我建议您根本不要使用useEffect，据我所知，您希望在更新某个状态时调用某个函数。为此，我建议您编写一个自定义函数，该函数将在更新时被调用（例如输入）

现在您可以调用这个函数并更新您的状态，因为您知道只有当这个特定状态即将更新时才会调用这个函数，然后您可以调用其他函数

如果你有像changeHandler这样的东西，你也可以在那里做，但我更愿意建议你写一个自定义函数

小示例代码：

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

const myFunction = () => {
   // do something
};

const myOtherFunc = (value) => {
   setStateItem(value);

   if (condition) {
      myFunction();
   }
};

我希望我正确地理解了你的问题，这是有帮助的
 看来您的目标是将您的功能保留在组件和

您不想将其移动到
useffect
内部，因为您想在其他地方使用它
您不希望将其移到函数之外，因为您希望避免从组件传递参数
在这种情况下，我认为最好的解决方案是使用
useCallback
钩子，如下所示


function YourComponent(props){

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

  //wrap your logic in useCallback hook
  const myFunction = React.useCallback(
    () => {

      //if you use any dependencies in this function add them to the deps array of useCallback
      //so if any of the dependencies change thats only when the function changes

      return 'hello'
    }, [deps])

    useEffect(() => { 
       if(condition) {
          myFunction();
       }

    //add your function to the dependency array as well
    //the useCallback hook will ensure your function is always constant on every rerender thus you wont have any issues by putting it in the deps array, besides the #1 rule is NEVER LIE ABOUT YOUR DEPENDENCIES
    //the function only changes if the dependencies to useCallback hook change!!
    }, [stateItem, myFunction ])

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




功能组件（道具）{
const[stateItem，setStateItem]=useState（0）；
//将您的逻辑包装在UseCallbackHook中
const myFunction=React.useCallback(
() => {
//如果在此函数中使用任何依赖项，请将它们添加到useCallback的deps数组中
//因此，如果任何依赖项发生变化，则只有在函数发生变化时才会发生变化
返回“你好”
}，[deps]）
useffect（（）=>{
如果（条件）{
myFunction（）；
}
//将函数也添加到依赖项数组中
//useCallback钩子将确保您的函数在每次重新加载时始终保持不变，因此将其放入deps数组中不会出现任何问题，此外#1规则永远不会对依赖项撒谎
//只有当useCallback钩子的依赖项更改时，函数才会更改！！
}，[stateItem，myFunction]
const [stateItem, setStateItem] = useState(0);

const myFunction = () => {
   // do something
};

const myOtherFunc = (value) => {
   setStateItem(value);

   if (condition) {
      myFunction();
   }
};


function YourComponent(props){

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

  //wrap your logic in useCallback hook
  const myFunction = React.useCallback(
    () => {

      //if you use any dependencies in this function add them to the deps array of useCallback
      //so if any of the dependencies change thats only when the function changes

      return 'hello'
    }, [deps])

    useEffect(() => { 
       if(condition) {
          myFunction();
       }

    //add your function to the dependency array as well
    //the useCallback hook will ensure your function is always constant on every rerender thus you wont have any issues by putting it in the deps array, besides the #1 rule is NEVER LIE ABOUT YOUR DEPENDENCIES
    //the function only changes if the dependencies to useCallback hook change!!
    }, [stateItem, myFunction ])

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