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

你可能感兴趣的:(javascript,reactjs)