分析一波 useEffect

useEffect 介绍

useEffect是reactHook中最重要和常用的hook之一。对比React class 的生命周期函数，可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

componentDidMount 挂载

componentDidUpdate 更新

componentWillUnmount 卸载

useEffect需要传递两个参数，第一个参数是逻辑处理函数，第二个参数是一个数组

useEffect(() => {

/** 执行逻辑 */

},[])

1

2

3

一、第二个参数存放变量，当数组存放变量发生改变时，第一个参数，逻辑处理函数将会被执行

二、第二个参数可以不传，不会报错，但浏览器会无线循环执行逻辑处理函数。

useEffect(() => {

/** 执行逻辑 */

})

1

2

3

三、第二个参数如果只传一个空数组，逻辑处理函数里面的逻辑只会在组件挂载时执行一次 ， ~== componentDidMount

useEffect(() => {

/** 执行逻辑 */

},[])

1

2

3

四、第二个参数如果不为空数组，如下

const [a, setA] = useState(1);

const [b, setB] = useState(2);

useEffect(() => {

/** 执行逻辑 */

},[a,b])

1

2

3

4

5

逻辑处理函数会在组件挂载时执行一次和(a或者b变量在栈中的值发生改变时执行一次)  ~== componentDidMount +  componentDidUpdate 

五、useEffect第一个参数可以返回一个回调函数，这个回调函数将会在组件被摧毁之前和再一次触发更新时，将之前的副作用清除掉。~== componentWillUnmount。

useEffect去除副作用。我们可能会在组件即将被挂载的时候创建一些不断循环的订阅（计时器，或者递归循环）。在组件被摧毁之前，或者依赖数组的元素更新后，应该将这些订阅也给摧毁掉。

比如以下的情况（没有去除计时器，增大不必要的开销和代码风险）

const [time, setTime] = useState(0)

useEffect(() => {

const InterVal = setInterval(() => {

setTime(time + 1)

},1000)

},[])

1

2

3

4

5

6

7

利用第五点，在组件被摧毁前去除计时器。

const [time, setTime] = useState(0)

useEffect(() => {

const InterVal = setInterval(() => {

setTime(time + 1)

},1000)

return () => {

                   clearInterval(InterVal )

           }

},[])

1

2

3

4

5

6

7

8

9

10

useEffect常见坑

1、useEffect执行函数被循环执行。

没传第二个参数 ？？？

useEffect(() => {

/** 执行逻辑 */

})

1

2

3

解决的方法

useEffect(() => {

/** 执行逻辑 */

},[])

1

2

3

在useEffect执行函数里面改变了useEffect监测的变量 ???

const [a, setA] = useState(1);

useEffect(() => {

/** 执行逻辑 */

setA(a + 1)

},[a])

1

2

3

4

5

解决的方法 不要在useEffect第一参数执行函数中去改变第二参数依赖元素的地址的值。当依赖元素的地址的值发生改变，又会执行一次执行函数  === 无限循环。

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

依赖数组元素的地址的值没变？比如:

const [a, setA] = useState({

b: 'dx',

c: '18',

})

const changeA = () => {

setA((old) => {

old.b = 'yx'

return old

})

}

useEffect(() => {

/** 当组件挂载时执行一次changeA */

changeA ()

},[])

/**当changeA执行却没有打印 a*/

useEffect(() => {

/** 执行逻辑 */

console.log(a)

},[a])

1

2

3

... ...

21

22

是因为changeA没有真正的改变a在栈中的值（地址的值），只是改变了a在堆中的值。

useEffect监测不到堆中值得变化，所有引用类型数据都应该注意这一点。

解决的办法

const [a, setA] = useState({

b: 'dx',

c: '18',

})

const changeA = () => {

setA((old) => {

const newA = {...old}

newA .b = 'yx'

return newA

})

}

useEffect(() => {

/** 当组件挂载时执行一次changeA */

changeA ()

},[])

/**当changeA执行打印  {b:'yx',c:'18'}  */

useEffect(() => {

/** 执行逻辑 */

console.log(a)

},[a])