React - append DOM 无限没有最大深度/无限循环错误？

Question

这可能与 React 的本质背道而驰，但是……我可以无限更新 DOM 吗？

即我想运行这样的东西，直到我杀死应用程序。 添加一个停止按钮会很好，但我可以在控制台中按 CTRL+C。

x=1;
while(x > 0){
  // append DOM with `<div>${x}</div>`
  x+=1;
}

我正在为 DOM 容器使用 useRef，并尝试将逻辑放在 useEffect 挂钩中，但 React 不喜欢开放式更新。

Answer 1

我对您的用例很感兴趣，最好了解更多关于它的信息，因为请求很奇怪，但我喜欢挑战，所以我在这里 go。

React 具有无限循环检测功能，但您可以通过确保仅在前一个元素提交到 DOM 之后才添加一个 DOM 元素来做到这一点。

import { useState, useLayoutEffect } from "react";

export default function InfiniteDivAppender() {
  const [divCount, setDivCount] = useState(1);
  const [pause, setPause] = useState(false);

  useLayoutEffect(() => {
    if (pause) return;
    setImmediate(() => setDivCount((prev) => prev + 1));
  }, [divCount, pause]);

  return (
    <>
      <button onClick={() => setPause((prev) => !prev)}>
        {pause ? "Resume" : "Pause"}
      </button>
      {[...Array(divCount).keys()].map((n, index) => (
        <div key={index}>{index}</div>
      ))}
    </>
  );
}

请注意，这仍然是大量的浏览器操作，您可能需要等待几秒钟才能让选项卡赶上，但它最终会打印出来，而且它也不会触发循环检测，因为我同时使用setImmediate useLayoutEffect （注意：不是useEffect ）。

请注意，控制台上的 ctrl+c 可能不会将您从崩溃的浏览器选项卡中拯救出来——它最终会因此而崩溃，因为您不能在 web 页面上拥有无限节点。

Answer 2

我用无限循环 useEffect 完成了这个。 看起来它在控制台中给你一个关于最大深度的错误，但它似乎还在运行？

import "./styles.css";
import {useState, useEffect} from "react"

export default function App() {
  const [array, setArray] = useState([])
  useEffect(() => {
    setArray([...array, "hi"])
  }, [array])
  return (
    <div className="App">
      {array.map((_, i) => <h1 key={i}>#{i}</h1>)}
    </div>
  );
}