Блог

Главная - Вопросы по программированию - Что происходит, когда реагируют повторные отправители?

Что происходит, когда реагируют повторные отправители?

#reactjs

Вопрос:

У меня есть следующий код, и вы можете просмотреть его в CodeSandbox:

 import "./styles.css";
import lottie from "lottie-web";
import { useEffect, useRef } from "react";
import logo from "pic";

export default function App() {
  const el = useRef(null);
  useEffect(() => {
    if (el != null) {
      lottie.loadAnimation({
        container: el,
        renderer: "svg",
        loop: true,
        autoplay: true,
        animationData: logo
      });
    }
  }, []);

  return (
    <div className="App">
      <div ref={el}></div>
    </div>
  );
}

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

Я новичок в реагировании и только очень хорошо понимаю, как работает React в фоновом режиме, вот что я думаю: в основном, когда я изменяю второй тег div, алгоритм diff замечает, что он был изменен, поэтому он продолжает и пытается изменить dom, связанный с ним. На мой взгляд, это может 1). либо обновите текущий дом 2). удалите его и добавьте новый dom. В первой ситуации не следует ли оставить первую анимацию без изменений без добавления новой анимации? Во второй ситуации, если он избавится от текущего dom, зачем сохранять исходную анимацию?

Комментарии:

1. Вы должны смотреть на el.current , а не просто el . Прочитайте документы для useRef.

Ответ №1:

Реакция может выполнять оба упомянутых вами сценария: update existing и destroy amp; re-create . И React использует свой собственный алгоритм, чтобы решить, когда и что делать.

Вы можете заставить реагировать на использование destroy amp; re-create стратегии с помощью специального props вызова key .

Вот пример: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key

Цитируется по ссылке выше:

При изменении ключа React создаст новый экземпляр компонента, а не обновит текущий

Я не мог запустить пример, который вы предоставили через песочницу кода, и просто прочитав ваш код, я вижу, что у вашего App компонента нет props и нет state . Таким образом, у вас нет возможности обновить его.

Ваш код сказал: когда componentDidMount используется lottie для анимации внутри второго div . Таким образом, есть вероятность, что проблема с анимацией, с которой вы столкнулись, вероятно, связана с lottie тем, что вы не реагируете.

Метки: ,