如果你熟悉 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])