React 在加载时只调用一次方法

Question

我是 Hooks 的新手，并且遇到了一些让我追尾的案例。

希望有人可以解释或提供对我有意义的解决方案：

1. 在安装组件时只加载一次方法是令人困惑的。我试过这个方法，它有效，但不明白。谁可以给我解释一下这个：

   const useMountEffect = fun => useEffect(fun, [])
   
   useMountEffect(() => {
     if (!isEdit) handleAddRow()
   })
   
   const handleAddRow = () => {
     let appendArr = [...listArr, '']
     setListArr(appendArr)
   }
   

关注此线程： 如何使用 React useEffect 仅调用一次加载函数

我尝试只使用没有依赖关系的 useEffect 并且 eslint 不喜欢那样，他们建议添加一个似乎有点 hacky 的跳过下一行：

// eslint-disable-next-line

Answer 1

如果我是对的，你想要类似于componentDidMount生命周期方法的东西。这样做的方法是

function MyComponent(props){
    useEffect(()=>{
        // do stuff here...
    }, []) // <-- empty dependency array
    return <div></div>
}

要了解发生了什么，您需要了解 useEffect 钩子的工作原理。使用没有任何依赖关系的 useEffect 钩子将在每次某些状态或道具更改并导致重新渲染时触发效果。但是如果我们传递一个空数组作为依赖项，它将作为效果不依赖于其他任何东西，因此它只会在组件安装时触发。

Answer 2

对于任何希望每个整个应用程序（全局）执行一次函数的人来说，这可能是一个解决方案：

\n

if (typeof window !== \'undefined\') { // Check if we\'re running in the browser.\n   // \xe2\x9c\x85 Only runs once per app load\n  checkAuthToken();\n  loadDataFromLocalStorage();\n}\n\nfunction App() {\n  // ...\n}\n

\n

来源/扩展解释在这里。

\n

Answer 3

useEffect()需要 2 个参数 - 您的函数和依赖项。依赖部分告诉它什么时候运行你的函数——如果依赖没有改变，它就不会再次运行。如果依赖项确实更新，它将再次运行您的函数。