如何修复文档附加子减慢反应程序？

Question

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

我可以做出任何改变来加快这个过程吗？

成长按钮.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;

  }

}

成长按钮.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">&nbsp; &nbsp; &nbsp; &nbsp;<img&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={(e) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;const element = document.createElement("div");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;element.innerText = x;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;element.setAttribute("id", "x" + x++);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;element.style.top = event.clientY + "px";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;element.style.left = event.clientX - 10 + "px";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;setElements([...elements].concat([element]))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="growIcon"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src="./Images/Plague_Icon_3.png"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alt="Dummy growIcon"&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp;{elements.map(element => element)}&nbsp;</div>)}