反应只在加载时调用方法一次

Question

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

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

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

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

关注这个话题： How to call loading function with React useEffect only once

我尝试只使用不依赖的 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

空数组 [] 参数告诉 useEffect() 只运行一次

它只会在挂载时运行一次，就像以前的 componentDidMount 一样

解释：

useEffect() 接受 2 个参数 - 你的函数和一个依赖数组

useEffect(
    yourFunction, // <- function that will run on every dependency update
    [] // <-- empty dependency array
) 

依赖数组参数告诉它何时运行你的函数。如果依赖项没有改变，它将不会再次运行。如果依赖项确实更新了，它将再次运行您的函数。

如果你传入一个空数组（没有依赖关系），那么函数只会在挂载时运行。

ESLint 缺少依赖错误

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

ESLint 规则的原因是 useEffect() 设计为在每次依赖项更新时运行，它希望您将所有依赖项添加到该数组中。

要忽略这一点，您可以在依赖数组行上方添加：

// eslint-disable-next-line react-hooks/exhaustive-deps