我是靠谱客的博主 喜悦冰淇淋,最近开发中收集的这篇文章主要介绍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进入画面的动画结束后,才会执行拉取数据的操作,这个逻辑才符合我们的预期。

最后

以上就是喜悦冰淇淋为你收集整理的React-Native延迟加载数据,避免更新数据时造成画面卡顿的方案的全部内容,希望文章能够帮你解决React-Native延迟加载数据,避免更新数据时造成画面卡顿的方案所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(23)

评论列表共有 0 条评论

立即
投稿
返回
顶部