컴포넌트로부터의 윈도 이벤트 청취에 관한 React.js 베스트 프랙티스

컴포넌트로부터의 윈도 이벤트 청취에 관한 React.js 베스트 프랙티스

뷰포트 내 위치에 따라 여러 React.js 컴포넌트를 애니메이션으로 만듭니다.구성요소가 뷰포트에 있는 경우 불투명도를 1로, 뷰포트에 없는 경우 불투명도를 0으로 애니메이션합니다.사용하고 있다getBoundingClient()의top그리고.bottom속성을 클릭하여 컴포넌트가 뷰포트 내에 있는지 여부를 확인합니다.

컴포넌트 A는 다른 B, C 및 D 컴포넌트에 대해 수행한 패턴을 보여줍니다.그들은 각자 그 노래를 듣고 있다.window스크롤 이벤트

이것이 각 컴포넌트가 이벤트청취자를 추가하도록 하는 "React" 방식입니까?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);
    }
  }, []);

여기에는 몇 가지 다른 방법이 있습니다.하나는 구성을 통한 것입니다.

var React = require("react");
var _ = require("underscore");

var ScrollWrapper = React.createClass({
    propTypes: {
        onWindowScroll: React.PropTypes.func
    },

    handleScroll: function(event) {
        // Do something generic, if you have to
        console.log("ScrollWrapper's handleScroll");

        // Call the passed-in prop
        if (this.props.onWindowScroll) this.props.onWindowScroll(event);
    },

    render: function () {
        return this.props.children;
    },

    componentDidMount: function() {
        if (this.props.onWindowScroll) window.addEventListener("scroll", this.handleScroll);
    },

    componentWillUnmount: function() {
        if (this.props.onWindowScroll) window.removeEventListener("scroll", this.handleScroll);
    }
});

var ComponentA = React.createClass({
    handleScroll: function(event) {
        console.log("ComponentA's handleScroll");
    },

    render: function() {
        return (
            <ScrollWrapper onWindowScroll={this.handleScroll}>
                <div>whatever</div>
            </ScrollWrapper>
        );
    }
});

이제 일반적인 논리를 에 배치할 수 있습니다.ScrollWrapper갑자기 재사용할 수 있게 됩니다.작성은 가능합니다.ComponentB이 경우,ScrollWrapper같은ComponentA한다.

당신의 사례를 만족시키려면 아마도 당신은 합격해야 할 것이다.ScrollWrapper여분의 소품ComponentA아마도 당신은 그것을 소품으로 건네줄 수 있을 겁니다.ref당신의 논리를 불러올 수 있습니다.또한 트윈 또는 경계를 사용자 지정하는 옵션 또는 인수를 전달할 수도 있습니다.제가 코드화하지 않은 이유는 여러분이 이해하실 수 있고 제가 제공한 베이스로 직접 맞춤/작성하실 수 있을 것 같아서입니다.

이런 종류의 일을 성취하는 또 다른 방법은 Mixin을 통해서입니다.하지만, Mixins가 좋은지 나쁜지에 대해서는 많은 이야기가 있습니다만, 향후 React에 의해서도 추천을 받지 않게 될 가능성이 있습니다.당신은 이것에 대해 읽고 당신이 어떻게 생각하는지 스스로 결정할 수 있습니다.

다음은 필요에 따라 동작할 수 있는 간단한 코드 조각입니다.놓치고 있습니다.this실행 시 바인딩과 같은window.addEventListener('scroll', this.handleScroll);실제로 가리키고 있습니다.this를 선택합니다.

대신 컨스트럭터로 바인드해야 합니다.바라건대

class Home extends Component {
  constructor(props) {
    super(props)
    this.handleScroll = this.handleScroll.bind(this);
  }
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }
  handleScroll(e) {
    console.log('scroll event');
    console.log(e);
  }

  render() {
    return (
     <div>
       <ComponentA />
       <ComponentB />
       <ComponentC />
       <ComponentD />
     </div>
    );
  }
}

또 다른 옵션은 다음과 같습니다.두 가지 옵션은 모두 사용할 수 있습니다.

class Home extends Component {
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll.bind(this));
  }
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll.bind(this));
  }
  handleScroll(e) {
    console.log('scroll event');
    console.log(e);
  }

  render() {
    return (
     <div>
       <ComponentA />
       <ComponentB />
       <ComponentC />
       <ComponentD />
     </div>
    );
  }
}

이벤트 청취자/컴포넌트를 1개 추가하겠습니다.이 원칙은 코드 중복을 최소화하기 위해 재사용할 수 있는 구성 요소를 분리하여 응용프로그램에 "어디든지" 배치하는 것입니다.

따라서 이벤트리스트너를 컴포넌트별로 유지하는 접근방식은 유효합니다.

언급URL : https://stackoverflow.com/questions/32896624/react-js-best-practice-regarding-listening-to-window-events-from-components