业务中常用的原生函数

一、<Image/>延迟加载图片 图片进入视觉时开始加载

componentDidMount() { this.target = findDOMNode(this);this.observer = this.createObserver();this.observer.observe(this.target)}

componentWillUnmount() {    this.observer.unobserve(this.target)  }

createObserver() { return new window.IntersectionObserver(this.handleOnObserve, {....}) }

二、<Infinite/> 无限加载

const nearBottomOfElement = (element, distance = window.innerHeight) =>

  !!element &&

  element.getBoundingClientRect().bottom < window.innerHeight + distance

三、 <MediaPlayerController/>自定义 UI 交互的播放器

createPlayer = (options: MediaPlayerOption): MediaPlayer => {

// 实现一个 MediaPlayer class，constructor 中 创建 this.media ，并返回 this, 拥有 play pause duration on seek等方法，on 用于监听开始结束等原生事件， seek 用于获取修改 this.media.currentTime

  return new MediaPlayer(options)

}

<MediaPlayerController/>  中是一个拥有 createPlayer 创建了 media 对象的组件，组件的节点为实际要展示的播放组件。

did mount 时要调用 timeUpdate 并在 timeUpdate 中不断调用 

this._playTimer = window.requestAnimationFrame(() => this.timeUpdate())

停止或暂停时要 window.cancelAnimationFrame(this._playTimer)