【React】useEffect使用详解
如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
·
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',
})
const changeA = () => {
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',
})
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])
更多推荐
所有评论(0)