Question

我是新来的人，我知道在第一次初始化compo以及道具或状态发生变化时会调用使用效果，但是为什么在这种情况下，当我将某些状态从false更改为true时却没有一个无限循环，但是当我在数组上执行此操作时，useEffect将产生无限循环。

我问我在数组中更改状态而不是booloean值时为什么会打到无限循环？有什么区别？

//runs twise once for the first initalising once when i update the state

function App() {
  const [bool,setBool] = useState(false);
  useEffect(() => {
    setBool(true);
    console.log("in use effect");
  })

  return (
    <div>

     </div>
  );
}

export default App;


//hits infinite loop 
function App() {
  const [array,setArray] = useState([]);
  useEffect(() => {
    setArray([1,2,3]);
    console.log("in use effect");
  })

  return (
    <div>

     </div>
  );
}

export default App;

Answer 1

让我们从一个简单的示例开始：

function App() {
    const [bool, setBool] = useState(false);

    return (<div>{bool}</div>);
}

该应用程序首次呈现，我们看到其中包含false的div。不再需要发生任何事情，因为我们在组件内部没有任何影响。

现在情况更加复杂。让我们尝试更新状态：

function App() {
    const [bool, setBool] = useState(false);

    useEffect(() => {
        setBool(true);
    });

    return (<div>{bool}</div>);
}

首先，我们使用默认状态App渲染false。效果将被执行并将状态更新为true。请注意，效果已在false渲染到屏幕后运行。现在，为了更新屏幕上的该值，它需要确定是否需要重新渲染App。它检查false之前的内容，并将其与现在获得的内容进行比较：true。它会注意到这些值不相同（false !== true产生true），因此它放弃了App。在执行此操作时，将再次调用该效果。它将状态再次更新为true，然后该应用检查是否需要重新呈现。现在，它看不到任何变化（true !== true产生了false），因此该运行不会重新渲染App。

数组具有不同的相等性。两个新的空数组彼此不相等（[] === []产生false），并且不比较数组内部的内容（[1,2,3] === [1,2,3]产生false）。如果必须比较是否需要重新渲染组件，则每次调用都会得到确定的“是”，从而导致无限循环或依赖于实现的stackoverflow。

可以在此处找到相关问题：https://github.com/facebook/react/issues/17688

在这种情况下，为什么useEffect不会遇到无限循环？

1 个答案: