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

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">

       <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>

)

}