React中useEffect与哪个生命周期钩子函数的对应关系最为密切？

本文共计1130个文字，预计阅读时间需要5分钟。

目录：React useEffect 与生命周期钩子函数的关系

一、使用格式一：不带参数的情况

二、使用格式二：带第二个参数，参数为空数组

三、使用格式三：带第二个参数，参数为指定依赖项数组

四、使用格式四：带第二个参数，指定依赖项

目录

• React useEffect与生命周期钩子函数的对应关系
• 使用格式一：不带参数的情况
• 使用格式二：带第二个参数，参数为空数组
• 使用格式三：带第二个参数，并且指定了依赖项
• 使用格式四：依赖项为空,没有具体的副作用函数.但是有副作用函数的清理函数.
• React函数式组件用useEffect模拟三个生命周期钩子函数

React useEffect与生命周期钩子函数的对应关系

在React的函数组件中，useEffect的作用其实也对标了类组件中的生命周期，它的四种使用格式也与生命周期的四种钩子函数形成着对应关系。

使用格式一：不带参数的情况

执行时机：（1）初始执行 （2）每次页面更新之后都要执行

useEffect( () => { //执行函数 })

对应关系：componentDidMount + componentDidUpdate

使用格式二：带第二个参数，参数为空数组

执行时机：只执行第一次（初始执行）

useEffect( () => { //执行函数 }, [] )

对应关系：componentDidMount

使用场景：事件绑定、发起ajax请求

使用格式三：带第二个参数，并且指定了依赖项

执行时机：只执行第一次（初始执行）

useEffect( () => { //执行函数 }, [] )

对应关系：componentDidMount

使用场景：事件绑定、发起ajax请求

使用格式四：依赖项为空,没有具体的副作用函数.但是有副作用函数的清理函数.

执行时机：组件销毁时

useEffect( () => { return () => { 清理函数 } }, [] )

对应关系：componentWillUnMount

使用场景：组件销毁时,清除遗留的事件绑定和定时器.

React函数式组件用useEffect模拟三个生命周期钩子函数

首先我们知道在React中的函数式组件是没有生命周期的，那我们想在函数式组件中实现class组件中生命周期钩子函数的效果应该怎么操作呢？

这里就得用到一个hooks来模拟钩子函数，这个hooks就是useEffect，这个useEffect可以模拟三个钩子函数，分别是componentDidMount，componentWillUnmount和componentDidUpdate。

先贴代码为敬

React.useEffect(() => {     console.log("这是模拟componentDidMount钩子函数")     return () => {//return出来的函数本来就是更新前，销毁前执行的函数，现在不监听任何状态，所以只在销毁前执行         console.log("这是模拟componentWillUnmount钩子函数")     } },[])//第二个参数一定是一个空数组，因为如果不写会默认监听所有状态，这样写就不会监听任何状态，只在初始化时执行一次。

通过上面这种写法就可以同时模拟componentDidMount和componentWillUnmount钩子函数。接下来说componentDidUpdate

//在此之前需要使用useRef这个hooks const flag = React.useRef(null) React.useEffect(() => {     if(!flag.current){         flag.current = true     } else {         console.log("更新了")     } })

在这里我们没有传第二个参数，也就是说他默认监听所有状态，只要有状态发生改变，他就会执行，但又有一个问题，他初始化的时候也会执行，为了解决这样的问题我们采用了useRef作为标记，初始化的时候flag.current肯定为false，所以我们将它设置成true，所以他就不会初始化执行了。

看到这里我想有一些小伙伴可能有这样的疑问，就是为什么用useRef，定义一个全局变量不香吗？是，如果你这个组件在一个页面只用一次那就没问题，但组件就是为了复用的，试想一下，在同一页面中你使用了两次这样的组件，第一个组件就没问题，但第二个组件就会初始化执行，因为在全局变量中的flag已经被第一个组件修改成了true，而useRef却不会，他是属于组件内部的，不会受到干扰。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。