React.js 关于监听组件窗口事件的最佳实践

我根据几个 React.js 组件在视口中的位置对它们进行动画处理。如果组件位于视口中，则将不透明度动画设置为 1，如果不在视口中，则将其不透明度动画设置为 0。我正在使用getBoundingClient()'s top and bottom属性来确定组件是否在视口内。

组件 A 显示了我对其他 B、C 和 D 组件遵循的模式。他们每个人都在聆听window滚动事件。

这是通过每个组件必须向window？同一窗口上有多个滚动事件侦听器？

或者是否有更好的方法，将滚动事件侦听器添加到窗口一次Home所有者组件？那么，拥有者子组件仍然能够使用以下方法知道它们在 DOM 中的位置：getBoundingClient()?

Home = React.createClass({
 render: function() {
    <div>
       <ComponentA />
       <ComponentB />
       <ComponentC />
       <ComponentD />
    </div>
  };
});

ComponentA = React.createClass({
  componentDidMount: function() {
   window.addEventListener('scroll', this.handleScroll);
},
  componentWillUnmount: function() {
    window.removeEventListener('scroll', this.handleScroll);
   },

handleScroll: function() {
  var domElement = this.refs.domElement.getDOMNode();
  this.inViewPort(domElement);
},

inViewPort: function(element) {
  var elementBounds = element.getBoundingClientRect();
  (elementBounds.top <= 769 && elementBounds.bottom >= 430) ? TweenMax.to(element, 1.5, { opacity: 1 }) : TweenMax.to(element, 1.5, { opacity: 0 });
},
render: function() {
  return (/* html to render */);
 }

});

这是带有 useEffect 钩子的函数式风格：

  useEffect(() => {
    const onScroll = (event) => console.info("scrolling", event);
      
    window.addEventListener('scroll', onScroll);
    
    return () => {
      window.removeEventListener('scroll', onScroll);
    }
  }, []);