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

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！