React：useEffect 与生命周期方法的解释

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

React 的useEffectHook 结合了 `on` componentDidMount、 ` componentDidUpdateonset` 和componentWillUnmount生命周期方法。这非常有用，原因如下：它减少了代码量，简化了代码，并允许useEffect在单个组件中调用多个 Hook。

useEffect您可以点击此处阅读更多关于Hook 的信息： React 文档

有时，我们只想运行生命周期方法中的一个。以下速查表将帮助您实现所需的效果。

componentDidMount 等效项

为了使该钩子只运行一次（在组件挂载时），我们需要将一个空数组设置为钩子依赖项。

useEffect(() => {
  /* ComponentDidMount code */
}, []);

componentDidUpdate 等效项

为了使该钩子在组件更新时运行（包括挂载），我们需要将至少一个变量设置为钩子的依赖项（在本例中为var1和var2）。

useEffect(() => {
  /* componentDidUpdate code */
}, [var1, var2]);

componentWillUnmount 等效项

为了使这个钩子在组件卸载时运行，我们需要从钩子中返回一个函数。如果我们希望清理函数仅在组件卸载后运行，则需要设置一个空数组。如果我们在依赖数组中设置一个或多个变量，则每次重新渲染时都会运行清理函数。

useEffect(() => {
  return () => {
   /* componentWillUnmount code */
  }
}, []);

三者合起来

useEffect(() => {

  /* componentDidMount code + componentDidUpdate code */

  return () => {
   /* componentWillUnmount code */
  }
}, [var1, var2]);

这些文章都是靠咖啡支撑着写出来的。所以，如果您喜欢我的作品并觉得它有用，不妨请我喝杯咖啡吧！我将不胜感激。

感谢您抽出时间阅读这篇文章。如果您觉得有用，请点赞❤️或🦄，分享并留言。