亲宝软件园·资讯

展开

React useEffect的理解与使用

咸蛋超人l 人气:0

useEffect 介绍

如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做

componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

使用方法

情况一:

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

代码如下:

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

情况二:

代码如下:

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

情况三:

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

代码如下:

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

情况四:

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

情况五:

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

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])

加载全部内容

相关教程
猜你喜欢
用户评论