我爱模板网 > 建站教程 > 前端框架 >  react useEffect一直重复执行正文

react useEffect一直重复执行

react的useEffect,如果用的不好的话,里面的方法会一直执行,导致性能损耗严重,下面是网上总结的,比较不错:
import { useState, useEffect } from 'react'
// useEffect(callback,arr);
/*
useEffect接受两个参数
callback: 回调函数,第一次会默认执行一次,内部可以return一个回调函数,当卸载组件时执行
arr: 监控变量的数组,如果不传入arr则默认监控全部的变量,
     如果传入并且为空,则相当于生命周期的DidMount;
     如果有值则当里面的值变化时会再执行callback,相当于update生命周期
*/
let [c, setC] = useState(0);
useEffect(()=>{
    setC(++c)
});
// 会一直执行,没有arr默认监控全部,setC之后c变了,再执行setC然后循环
useEffect(()=>{
    setC(++c)
}, [c]);
// 会一直执行,c被监控了,setC之后c变了,再执行setC然后循环
useEffect(()=>{
    setC(++c)
}, []);
// 只会运行一次,没有监控只有默认的一次调用setC

// 可以在内部控制逻辑
useEffect(()=>{
    if(c<10){
        setC(++c)
    }
}, [c]);
// 但是不能在外面控制
if(c<10){
    useEffect(()=>{
        setC(++c)
    }, [c]);
}
// 因为react的hooks是通过位置进行匹配的,如果用了逻辑判断执行可能会造成错位,导致意想不到的bug



部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:uni-app movable组件配合css pointer-events属性实现全屏推拽小控件 下一篇:vue @click.native、@click.stop、@click.self总结
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢