一般来说，无限循环被认为是不好的做法。但在某些边界情况下，您别无选择，只能无限循环。很高兴了解React的无限循环模式。当无限循环没有失败停止时，浏览器最终会杀死您的代码运行的选项卡。所以不要使用没有任何断点的“无限循环”。useEffectuseEffecthook允许我们在组件中展示副作用。当react16中引入hooks时，useEffecthooks比其他hooks更具吸引力。因为它提供了componentDidMount、componentDidUpdate和componentWillUnmount生命周期方法的组合功能。useEffect钩子仅在依赖项更改时触发回调。并且它使用浅比较来比较钩子的值。你可以把useEffect想象成一块能量石，它是最强大的石头，如果你处理不当，它会摧毁你。useEffect缺少依赖项通常被认为是一种不好的做法，所以总是尽量避免它。考虑下面的代码，它一直调用API。useEffect(()=>{fetch("/api/user").then((res)=>res.json).then((res)=>{setData(res);});});如果useEffect仅在依赖项发生变化时触发回调，为什么我们这里会出现无限循环？您需要考虑React的另一个重要规则，即“当state或props发生变化时，组件将重新渲染”。在这段代码中，我们使用setData设置网络调用成功后的状态值，这将触发组件的重新渲染。由于useEffect没有可比较的值，它将调用回调。Fetch会再次触发setData，setData会触发组件重新渲染，以此类推。如何解决这个问题？我们需要将依赖项指定为一个空数组。useEffect(()=>{fetch("/api/user").then((res)=>res.json).then((res)=>{setData(res);});},[]);//<-dependencies根据官方文档，省略依赖项是不安全的。依赖关系的作用useEffect使用浅层对象比较来判断数据是否发生变化。因为奇怪的JavaScript条件系统??。varmark1=function(){return"100";};//唯一对象引用varmark2=function(){return"100";};//唯一对象引用mark1==mark2;//falsemark1===mark2;//false让我们看看下面的代码getItem("token");};const[dep,setDep]=useState(getData());useEffect(()=>{setCount(count+1);},[getData]);return(

HelloCodeSandbox