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

Posted 2023-02-22

【中文标题】反应只在加载时调用方法一次

【英文标题】：React calling a method on load only once

【发布时间】：2020-01-25 19:13:20

【问题描述】：

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

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

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

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

【参考方案1】：

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

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

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

【讨论】：

为什么这么多人提出问题然后不费心返回并通过单击答案作为“已回答”来奖励正确答案？问别人的时间而不奖励/感谢他们似乎不太好。我经常看到这种情况。回到问题并标记它有多难？

这不允许我运行一次外部函数，因为我必须将函数放在依赖数组中......在这些情况下我该怎么办？

@KyleCalica-St 如果你的函数是在你的组件之外定义的，你不需要将它传递给依赖数组。

【参考方案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

【讨论】：

感谢您的回复。 1. 如果你离开 useEffect() 没有依赖，你会收到一个 eslint 错误。 2. 当我使用const useMountEffect = fun => useEffect(fun, []) 方法时，我没有收到 eslint 错误。有人能解释一下为什么吗？

@DavidPell 依赖项参数不是必需的（我们可以在此处的源代码中看到 - github.com/facebook/react/blob/master/packages/react/src/…）。 ESLint 规则只是为了帮助您，因为您可能确实希望您的函数仅在输入更改时运行。 Dan Abv 在这里更深入地解释overreacted.io/a-complete-guide-to-useeffect

感谢乔纳森的文章！

@DavidPell 这回答了你的问题吗？如果可以，您可以将其标记为已接受吗？