如何解决React.useEffect()的无限循环

useEffect() 主要用来管理副作用，比如通过网络抓取、直接操作 DOM、启动和结束计时器。

十年的新建网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同，自动调整新建建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“新建网站设计”,“新建网站推广”以来，每个客户项目都认真落实执行。

虽然useEffect() 和 useState(管理状态的方法)是最常用的钩子之一，但需要一些时间来熟悉和正确使用。

使用useEffect()时，你可能会遇到一个陷阱，那就是组件渲染的无限循环。在这篇文章中，会讲一下产生无限循环的常见场景以及如何避免它们。

1. 无限循环和副作用更新状态

假设我们有一个功能组件，该组件里面有一个 input 元素，组件是功能是计算 input 更改的次数。

我们给这个组件取名为 CountInputChanges，大概的内容如下：

 
 
 
 
  
  
  
  function CountInputChanges() {
  
  
  
    const [value, setValue] = useState('');
  
  
  
    const [count, setCount] = useState(-1);
  
  
  
  
  
  
  
   useEffect(() => setCount(count + 1));
  
  
  
    const onChange = ({ target }) => setValue(target.value);
  
  
  
  
  
  
  
    return (
  
  
  
      
  
  
  
   
  
  
  
   Number of changes: {count}

)

}

是受控组件。value变量保存着 input 输入的值，当用户输入输入时，onChange事件处理程序更新 value 状态。

这里使用useEffect()更新count变量。每次由于用户输入而导致组件重新渲染时，useEffect(() => setCount(count + 1))就会更新计数器。

因为useEffect(() => setCount(count + 1))是在没有依赖参数的情况下使用的，所以()=> setCount(count + 1)会在每次渲染组件后执行回调。

你觉得这样写会有问题吗?

运行了会发现count状态变量不受控制地增加，即使没有在input中输入任何东西，这是一个无限循环。

问题在于useEffect()的使用方式：

 
 
 
 
  
  
  
  useEffect(() => setCount(count + 1));

它生成一个无限循环的组件重新渲染。

在初始渲染之后，useEffect()执行更新状态的副作用回调函数。状态更新触发重新渲染。重新渲染之后，useEffect()执行副作用回调并再次更新状态，这将再次触发重新渲染。

1.1通过依赖来解决

无限循环可以通过正确管理useEffect(callback, dependencies)依赖项参数来修复。

因为我们希望count在值更改时增加，所以可以简单地将value作为副作用的依赖项。

 
 
 
 
  
  
  
  import { useEffect, useState } from 'react';
  
  
  
  
  
  
  
  function CountInputChanges() {
  
  
  
    const [value, setValue] = useState('');
  
  
  
    const [count, setCount] = useState(-1);
  
  
  
  
  
  
  
   useEffect(() => setCount(count + 1), [value]);
  
  
  
    const onChange = ({ target }) => setValue(target.value);
  
  
  
  
  
  
  
    return (
  
  
  
      
  
  
  
   
  
  
  
   Number of changes: {count}

添加[value]作为useEffect的依赖，这样只有当[value]发生变化时，计数状态变量才会更新。这样做可以解决无限循环。

import { useEffect, useState, useRef } from "react";
function CountInputChanges() {
const [value, setValue] = useState("");
const countRef = useRef(0);
useEffect(() => countRef.current++);
const onChange = ({ target }) => setValue(target.value);
return (
Number of changes: {countRef.current}

import { useEffect, useState } from "react";
function CountSecrets() {
const [secret, setSecret] = useState({ value: "", countSecrets: 0 });
useEffect(() => {
if (secret.value === 'secret') {
setSecret(s => ({...s, countSecrets: s.countSecrets + 1})); }
}, [secret]);
const onChange = ({ target }) => {
setSecret(s => ({ ...s, value: target.value }));
};
return (
Number of secrets: {secret.countSecrets}
);
}

let myObject = {
prop: 'Value'
};
useEffect(() => {
// some logic
}, [myObject]); // Not good!
useEffect(() => {
// some logic
}, [myObject.prop]); // Good!

import { useEffect, useState } from "react";
function CountSecrets() {
const [secret, setSecret] = useState({ value: "", countSecrets: 0 });
useEffect(() => {
if (secret.value === 'secret') {
setSecret(s => ({...s, countSecrets: s.countSecrets + 1}));
}
}, [secret.value]);
const onChange = ({ target }) => {
setSecret(s => ({ ...s, value: target.value }));
};
return (
Number of secrets: {secret.countSecrets}
);
}

useEffect(() => {
// Infinite loop!
setObject({
...object,
prop: 'newValue'
})
}, [object]);

useEffect(() => {
// No infinite loop
setObject({
...object,
prop: 'newValue'
})
}, [object.whenToUpdateProp]);

如何解决React.useEffect()的无限循环

1. 无限循环和副作用更新状态

1.1通过依赖来解决

1.2 使用 ref

2. 无限循环和新对象引用

2.1 避免将对象作为依赖项

3 总结