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

Question

我正在根据视口(viewport)中的位置为几个 React.js 组件制作动画。如果组件在视口(viewport)中，则将不透明度设置为 1，如果不在视口(viewport)中，则将其不透明度设置为 0。我正在使用 getBoundingClient() 的 top和 bottom 属性来确定组件是否在视口(viewport)内。

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

这是通过每个组件必须向 window 添加事件监听器来执行此操作的“React”方式吗？同一窗口上的多个滚动事件监听器？

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

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 */);
 }

});

Answer 1

这是带有 useEffect 钩子(Hook)的函数式风格:

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