仅在加载时调用方法一次

Question

我是胡克斯的新手，遇到了一些让我追自己尾巴的案例。

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

>

const useMountEffect = fun => useEffect(fun, [])

useMountEffect(() => {
  if (!isEdit) handleAddRow()
})

const handleAddRow = () => {
  let appendArr = [...listArr, '']
  setListArr(appendArr)
}

下面这个线程：如何调用加载函数与反应使用效果只有一次

我试着在没有依赖性的情况下使用useEffect，eslint不喜欢这样，他们建议添加一个“跳过下一行”，这似乎有点骇人：

// eslint-disable-next-line

Answer 1

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

useffect（）接受两个参数—函数和依赖项数组

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

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

如果传入空数组（没有依赖项），则该函数将仅在挂载上运行。

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

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

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

Answer 2

如果我是对的，您需要类似于componentDidMount生命周期方法的东西。方法是

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

要了解正在发生的事情，您需要了解use效应钩子是如何工作的。在没有任何依赖关系的情况下使用use效果钩子将在每次一些状态或道具更改并导致重新渲染时触发效果。但是如果我们传递一个空数组作为依赖，它将作为不依赖于任何其他东西的效果，所以它只会触发当组件挂载时。