Как исправить ошибку добавления дочернего документа, замедляющую реакцию программы? - PullRequest
Новая
       32

Как исправить ошибку добавления дочернего документа, замедляющую реакцию программы?

0 голосов
/ 13 июля 2020

Я пытаюсь сделать инкрементальную игру, похожую на Cook ie Clicker in React. Ниже я добавил анимацию щелчка при нажатии основной кнопки. Этот элемент создается как div и добавляется как дочерний элемент к root области отображения кнопки. Проблема в том, что при этом создается задержка между тем, когда пользователю разрешается щелкнуть снова, из-за медленного времени обработки. Я удалил анимацию, и время отклика осталось прежним.

Могу ли я внести какие-либо изменения, чтобы ускорить этот процесс?

GrowButton.s css

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

1 Ответ

0 голосов
/ 13 июля 2020

В состоянии вашего компонента отслеживайте все элементы

элементы - это массив [] из html элементов

при нажатии кнопки pu sh новый элемент в этом массиве

в функции рендеринга вам нужно l oop массив элементов и рендерить каждый элемент

Я использую функциональный компонент, чтобы продемонстрировать это, вы сможете адаптировать его к своим потребностям. 

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>
)
}
...