如何在功能组件中使用 React hooks 确保一行代码只执行一次？

Question

我希望 React 组件中的一行代码仅在安装组件时执行，而不是在重新渲染时执行。在有状态组件中，我会在 componentDidMount/componentWillMount 方法中执行此操作。

我如何使用钩子来做到这一点？

Answer 1

// 类似于componentDidMount和componentDidUpdate： useEffect(() => {}, [])

React 文档。 Hooks-Using 效果挂钩。 - > https://reactjs.org/docs/hooks-effect.html

Answer 2

我相信您正在寻找 reacts useEffect 钩子。它是 componentDidMount、componentDidUpdate 和 componentWillUnmount 的钩子替代品。你可以这样使用它：

useEffect(() => {
  console.log("only executed once")
}, [])

注意空数组作为第二个参数，它定义了此效果的依赖项。在这种情况下你希望没有依赖性，这样效果就不会再次执行。

有一篇很好的文章介绍如何用可用的钩子替换以前的生命周期函数here。

How can I ensure that a line of code is executed only once using React hooks in a functional component?