react，useEffect一直重复执行

最新推荐文章于 2026-04-11 23:46:14 发布

原创最新推荐文章于 2026-04-11 23:46:14 发布 · 5.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #reactjs

本文详细介绍了React Hooks中的useEffect，解析了其工作原理和应用场景。useEffect接受回调函数和依赖数组，用于实现副作用管理和组件更新控制。不传递依赖数组时默认在每次渲染时执行，传递空数组相当于生命周期的DidMount，而指定依赖项则会在相关值改变时触发。通过案例展示了如何避免逻辑判断导致的执行错位问题，确保Hooks正确匹配。

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