【React】useEffect使用详解

useEffect 介绍

如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做
componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

• componentDidMount 组件挂载
• componentDidUpdate 组件更新
• componentWillUnmount 组件将要摧毁

使用方法
情况一：

• useEffect需要传递两个参数，第一个参数是逻辑处理函数，第二个参数是一个数组 代码如下：

useEffect(()=>{/** 执行逻辑 */},[])

情况二：

• 第二个参数存放变量，当数组存放变量发生改变时，第一个参数，逻辑处理函数将会被执行
• 第二个参数可以不传，不会报错，但浏览器会无限循环执行逻辑处理函数。 代码如下：

useEffect(()=>{/** 执行逻辑 */})

情况三：

• 第二个参数如果只传一个空数组，逻辑处理函数里面的逻辑只会在组件挂载时执行一次 ，等价于 componentDidMount 代码如下：

useEffect(()=>{/** 执行逻辑 */},[])

情况四：

• 第二个参数如果不为空数组,依赖指定参数触发使用
• 逻辑处理函数会在组件挂载时执行一次和(a或者b变量在栈中的值发生改变时执行一次) 这是不是相当于componentDidMount 和componentDidUpdate 的结合

const[a, setA]=useState(1);const[b, setB]=useState(2);useEffect(()=>{/** 执行逻辑 */},[a,b])

情况五：

• useEffect第一个参数可以返回一个回调函数，这个回调函数将会在组件被摧毁之前和再一次触发更新时，将之前的副作用清除掉。这就相当于componentWillUnmount。
• useEffect去除副作用。我们可能会在组件即将被挂载的时候创建一些不断循环的订阅（计时器，或者递归循环）。在组件被摧毁之前，或者依赖数组的元素更新后，应该将这些订阅也给摧毁掉。 比如以下的情况（没有去除计时器，增大不必要的开销和代码风险）

const[time, setTime]=useState(0)useEffect(()=>{const InterVal =setInterval(()=>{setTime(time +1)},1000)},[])

处理在组件被摧毁前去除计时器

const[time, setTime]=useState(0)useEffect(()=>{const InterVal =setInterval(()=>{setTime(time +1)},1000)return()=>{clearInterval(InterVal )}},[])

特殊情况处理

useEffect监测不到依赖数组元素的变化。

只有一种可能，依赖数组元素的地址的值根本就没变，
原因：因为changeA没有真正的改变a在栈中的值（地址的值），只是改变了a在堆中的值。
useEffect监测不到堆中值得变化，所有引用类型数据都应该注意这一点。

代码示例:

const[a, setA]=useState({b:'dx',c:'18',})constchangeA=()=>{setA((old)=>{
    old.b ='yx'return old
    })}useEffect(()=>{/** 当组件挂载时执行一次changeA */changeA()},[])/**当changeA执行却没有打印 a*/useEffect(()=>{/** 执行逻辑 */
console.log(a)},[a])

解决的办法

const[a, setA]=useState({b:'dx',c:'18',})constchangeA=()=>{setA((old)=>{const newA ={...old}
    newA .b ='yx'return newA 
    })}useEffect(()=>{/** 当组件挂载时执行一次changeA */changeA()},[])/**当changeA执行打印  {b:'yx',c:'18'}  */useEffect(()=>{/** 执行逻辑 */
console.log(a)},[a])