在react中使用onAppear事件

封装一个可以使用onAppear的<VIew/>组件：

import React, { PureComponent } from 'react';

class View extends PureComponent {
  constructor(props) {
    super(props);
    this.triggeredAppear = false;
  }

  handleAppear = (event) => {
    const { onFirstAppear, onAppear } = this.props;
    onAppear && onAppear(event);
    if (!this.triggeredAppear) {
      this.triggeredAppear = true;
      onFirstAppear && onFirstAppear(event);
    }
  }

  handleClick = (event) => {
    const { onClick } = this.props;
    onClick && onClick(event);
  }

  componentWillUnmount() {
    const { onDisappear } = this.props;
    if (!this.refEle) return;
    this.refEle.removeEventListener('click', this.handleClick);
    this.refEle.removeEventListener('appear', this.handleAppear);
    if (onDisappear) {
      this.refEle.removeEventListener('disappear', onDisappear);
    }
  }

  componentDidMount() {
    const { onDisappear } = this.props;
    if (!this.refEle) return;
    this.refEle.addEventListener('click', this.handleClick);
    this.refEle.addEventListener('appear', this.handleAppear);
    if (onDisappear) {
      this.refEle.addEventListener('disappear', onDisappear);
    }
  }

  render() {
    const { onFirstAppear, onAppear, onClick, goldlogData, ...rest } = this.props;
    return (
      <div {...rest} ref={ele => this.refEle = ele} />
    )
  }
}

export default View;

在index.html中插入

import { setupAppear } from 'appear-polyfill';

(function() {
  function isUndef(type: any): boolean {
    return type === 'undefined';
  }
  const isWeb = !isUndef(typeof window) && 'onload' in window;
  if (isWeb) {
    setupAppear();
  }
})();

使用方法：

<View onAppear={() => console.log(曝光了)}>123123123</View>