如何确保在功能组件中使用React钩子只执行一行代码

Question

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

如何使用钩子完成此操作？

Answer 1

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

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

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

这里有一篇关于如何用钩子替换以前的生命周期函数的好文章。

Answer 2

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

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