Pull to refresh

Comments 4

ThreeContainer сделан как-то переусложненно и не совсем правильно. Я бы так сделал:


Заголовок спойлера
const ThreeContainer = React.memo(() => {
  const threeRef = useRef(); // Используется для обращения к контейнеру для canvas
  const three = useRef(); // Служит для определения, создан ли объект, чтобы не создавать повторный

  // Создание объекта класса Three, предназначенного для работы с three.js
  useEffect(() => {
    let color = 'blue'
    const colorChangeHandler = () => {
      // Просто поочерёдно меняем цвет с серого на синий и с синего на серый
      color = color === "grey" ? "blue" : "grey";
      three.current.rectColorChange(color);
    };
    three.current = new Three({
      color,
      rectSizes,
      sceneSizes,
      colorChangeHandler,
      canvasContainer: threeRef.current,
    });
  }, []);

  // Данный узел будет контейнером для canvas (который создаст three.js)
  return <div className="container" ref={threeRef} />;
});

color не нужен за пределами Three, потому уехал внутрь.
Итого, никаких перерендеров. Если вдруг надо будет добавить какой-нибудь реквизит, то по нему дополнительные useEffect, чтобы что-то императивно менять в экземпляре Three.

Добрый день! Подобный формат мы, конечно, тоже пробовали. Однако, при этом возникают проблемы с производительностью, когда при больших объёмах данных начинают конфликтовать нативный рендеринг js и рендеринг внутри React. По этой причине рендеринг получается совсем не плавным.
UFO landed and left these words here
Only those users with full accounts are able to leave comments. Log in, please.