Блог

Я прочитал документы gsap для интеграции с react, и он рекомендует использовать useRef() s для создания целевых элементов для анимации, например:

 const ref = useRef()
gsap.to(ref, {...})
  

однако это очень негибко, поскольку ссылка ограничена файлом компонента. в gsap вы, как правило, нацеливаетесь на несколько элементов со всего веб-сайта, например, с gsap.timeline() помощью, поэтому становится практически невозможно настроить таргетинг на несколько ссылок из нескольких компонентов без сложной логики, такой как использование context api .

поэтому мне интересно, является ли правильным подходом использование старомодного способа нацеливания на элементы с class именами в react?

например, внутри useEffect :

 gsap.from('.foo', {...})
  

потому что использование имен классов, похоже, связано с прямым манипулированием dom, и это кажется плохой практикой.

кто-нибудь может вмешаться в это?

В общем, вам следует избегать использования общих строк селектора (что вы делаете) в качестве цели для подростков в React. Одна из причин, по которой вы хотите это сделать, заключается в том, что он не очень реагирует и не сохраняет компоненты строго для себя. Во-вторых, window ссылка может существовать не всегда, поэтому в некоторых случаях она будет выдавать предупреждения (или ошибки в зависимости от вашего кода).

Старайтесь придерживаться использования ссылок и, при необходимости, использовать селекторы из этой ссылки. Это дает вам лучшее из обоих миров:

 const theRef = useCallback((node) => {
  if (!node) return;
  const spans = node.querySelectorAll('span')
  gsap.to(spans, { autoAlpha: 1})
},[])
...
<div ref={theRef}>
  <span />
  <span />
  <span />
</div>

  

Если вам нужно использовать общие строки селектора, протестируйте, протестируйте, а затем протестируйте его снова при множестве разных обстоятельств. С точки зрения анимации, вероятно, не будет снижения производительности, но убедитесь, что мусор очищается, потому что это действительно может загромождать сайт, если вы не уничтожите анимацию на componentUnmount s.

Для очень общего введения к React GSAP эта статья — отличное место для начала.