React-Native延迟加载数据，避免更新数据时造成画面卡顿的方案

不得不说React-Native的Component生命周期还真是坑，文档里说在执行到componentDidMount方法后就可以开开心心的搞事了，没想到在这里加载完网络数据执行state更新的时候居然会影响到Navigator中新页面的启动。具体的问题是这样的：

componentDidMount() {
    this._fetchData();
}

在componentDidMount方法中执行了fetchData方法来拉取网络数据，并在拉取到数据后通过更新state来更新UI

_fetchData() {
   let url = 'http://www.exsample.com/comment';
   fetch(url)
   .then((response) => response.json())
   .then((responseData) => {
      let dataMap = responseData.data.page.map;
      let dataBlob = [];
      for (let i in dataMap) {
         dataBlob.push(dataMap[i].content);
      }
      if(dataBlob.length !== 0) {
         let first = dataBlob.shift();
      this.setState({
         commentList: dataBlob,
         firstFloor: first,
      });
    }
  }).catch((error)=>{
     console.error(error);
  });
}

按照React-Native的生命周期调用规则，在setState之后，RN会依次调用shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate生命周期方法。然而问题就出在state更新后调用render方法时，会停止当前Component进入屏幕时的滚动动画。造成新Component进入画面一半时停住，甚至新Component还没开始进入画面时就 停住，等到componentDidUpdate执行完成后才继续向前滚动。严重影响使用体验。

这个时候我们就需要让这个state更新操作延迟进行。为了实现这个目的，可以使用RN提供的一个工具： InteractionManager。

从名称上可以看出，这是一个管理互动操作的工具。其中有一个方法 runAfterInteraction（func） 。这个方法用来标记参数中传入的方法在所有当前进行的交互和动画完成后再执行。可以理解为将func加入到一个等待队列。

我们可以使用这个方法来避免在Component进入画面的动画完成前打断动画的问题。类似于这样：

componentDidMount() {
   InteractionManager.runAfterInteractions(()=>{
      this._fetchData();
   });
}

这样，在Component进入画面的动画结束后，才会执行拉取数据的操作，这个逻辑才符合我们的预期。