如何修复文件追加子进程减慢反应程序？

Question

我正在尝试在 React 中制作类似于 Cookie Clicker 的增量游戏。当单击主按钮时，我在下面添加了单击动画。此项目创建为 div 并作为子项附加到按钮显示区域的根部。问题在于，这样做会导致由于处理时间缓慢而允许用户再次单击之间的延迟。我已经删除了动画，响应时间保持不变。

我可以做些什么来加快这个过程吗？

GrowButton.scss

#growIcon {
  border-radius: 50%;
  width: 245px;
  height: 245px;
  box-shadow: 0 0 0 5px #263238;
  background-color: #263238;
  position: relative;
  display: flex;
}

#growRoot {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 300px;
  min-height: 350px;
  height: 47.8vh;

  > [id^="x"] {
    width: 25px;
    height: 25px;
    position: absolute;
    color: white;
    font-weight: bold;
    animation: GoUp 1s forwards linear;
    -moz-animation: GoUp 1s forwards linear;
    -webkit-animation: GoUp 1s forwards linear;
    -o-animation: GoUp 1s forwards linear;
    -ms-animation: GoUp 1s forwards linear;
  }
}

@-moz-keyframes GoUp {
  0% {
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 0;
  }
}
@keyframes GoUp {
  0% {
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 0;
  }
}

@-webkit-keyframes GoUp {
  0% {
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 0;
  }
}
@-o-keyframes GoUp {
  0% {
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 0;
  }
}
@-ms-keyframes GoUp {
  0% {
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 0;
  }
}

GrowButton.js

  buttonClick(event, props) {
    props.onclick();
    let growRoot = document.getElementById("growRoot");
    let newDiv = document.createElement("div");
    newDiv.innerText = x;
    newDiv.setAttribute("id", "x" + x++);
    newDiv.style.top = event.clientY + "px";
    newDiv.style.left = event.clientX - 10 + "px";
    growRoot.appendChild(newDiv);
  }

   <div id="growRoot">
       <img
            onClick={(e) => this.buttonClick(e, this.props)}
            id="growIcon"
            src="./Images/Plague_Icon_3.png"
            alt="Dummy growIcon"
        />
    < /div>

Answer 1

在您的组件状态中跟踪所有元素

元素是 html 个元素的数组[=]

单击按钮将新元素推送到该数组

在渲染函数中你需要循环元素数组并渲染每个元素

我用功能组件来演示这个，你应该可以根据自己的需要进行调整。

const test = () => {
const [elements, setElements] = useState([<div> Some Element You Want Rendered </div>]);

return (
<div id="growRoot">
       <img
            onClick={(e) => {
                 const element = document.createElement("div");
                 element.innerText = x;
                 element.setAttribute("id", "x" + x++);
                 element.style.top = event.clientY + "px";
                 element.style.left = event.clientX - 10 + "px";
                 setElements([...elements].concat([element]))
             }}
            id="growIcon"
            src="./Images/Plague_Icon_3.png"
            alt="Dummy growIcon"
        />
       {elements.map(element => element)} 
</div>
)
}

如何修复文件追加子进程减慢反应程序？

How to fix document append child slowing down react program?

javascript

css

performance

appendchild

reactjs