美文网首页
5个可以提升RN app 速度的方法

5个可以提升RN app 速度的方法

作者: OnceWhite | 来源:发表于2018-06-13 11:21 被阅读553次

1. 使用 PureComponent 或者 shouldComponentUpdate

PureComponent没有状态,他们只是渲染组件基于数据通过道具。如果改变props 改变它只被重新呈现。shouldComponentUpdate生命周期方法用于常规的组件,通过返回false取消重新呈现某些场景

  • 以下两个场景
class MyComponent extends PureComponent {
  //
}

class MyComponent extends Component {
  //
  shouldComponentUpdate(nextProps, nextState) {
    if(this.props.firstProp === nextProps. firstProp &&
       this.props.secondProp === nextProps.secondProp) {
      return false;
    }
    return true
  }
  //
}

上面的两个例子可以帮助节省一些浪费的呈现。第一个例子已经实施shouldComponentUpdate逻辑。第二个例子可以有更多的控制。可以在组件维护状态和停止重新呈现如果状态没有改变

  • 比如 控制是否显示加载中
class MyComponent extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    if(this.state.isLoading === nextState. isLoading) {
      return false;
    }
    return true
  }
}

2. 在List 中使用 key attribute

列表是任何应用程序中最常用的东西。如果你不为每个列表项,当任何一项从列表中添加或删除时,会重新render每一项。拥有一个唯一键在每个列表项,只重新呈现一遍。

class MyComponent extends PureComponent {
  render() {
    return this.props.data.map((item, i) => {
      return <Text key={item.id}>{item.title}</Text>
    });
  }
}

3.早点绑定方法 不要在render里面创建方法

  • Do This
class MyComponent extends PureComponent {
  
  constructor(props) {
    super(props);
    //do this
    this.doWork = this.doWork.bind(this);
  }
  doWork() {
    // doing some work here.
    // this.props.dispatch....
  }
  
  render() {
    return <Text onPress={this.doWork}>Do Some Work</Text>
  }
  
}
  • Don't This
<Text onPress={ () => this.doWork() }>Do Some Work</Text>
  • 或者
<Text onPress={ this.doWork.bind(this) }>Do Some Work</Text>

因为render经常被渲染,每次渲染一次,创建一个新的函数。所以提前绑定函数。只创建一次。如果想向doWork函数传递参数,可以使用以下方式

doWork = (param) => {
 console.log(param)
}

<Text onPress={this.doWork(someVarParam)}Do Some Work With Args</Text>

4.Don’t update state or dispatch actions in componentWillUpdate

componentWillUpdate生命周期方法用于准备更新,不会触发另一个。如果你想设置状态或派遣任何回来的行动,他们在ReactV16.3版本后被componentWillReceiveProps代替。

5.使用性能监视器看FPS

开启开发工具性能监视器。当你开始互动,导航或滚动你的应用程序,可能会看到有时FPS变化很大,主要是其在JS线程,而不是本地UI线程上。
所以开始寻找痛点,你可能设置状态或派遣回来的行动在错误的地方。或做太多的JS线程同步工作,进而优化性能。

相关文章

  • 5个可以提升RN app 速度的方法

    1. 使用 PureComponent 或者 shouldComponentUpdate PureComponen...

  • 《启动大脑》读书笔记

    1.正确的阅读方法可以加快你的阅读速度到惊人的程度。高效的阅读方法。掌握你可以轻而易举集中注意力,提升阅读速度,同...

  • RN在实践过程中遇到的坑

    我们APP 中的 RN 是分业务模块动态加载的机制,也就是 RN 可以按业务模块发布来进行 APP 的更新。在这过...

  • App启动速度优化

    目的: app启动速度提升,有助于提高用户的体验。 成效: 通过检测App启动速度从4s提升到2s。 方案: 主要...

  • 周末认知复习-08,如何快速阅读

    过去我对快速阅读的理解就是,只要读得多速度自然可以提升,并没有想过如何通过方法的改进来提升阅读速度。本周的《阅读速...

  • Python_Pandas_性能提升

    Python_Pandas_性能提升 合理使用numpy及Pandas的一些方法,可以使运算速度成倍提升。本文将介...

  • wwdc主要内容

    1.swift swift+ 更流行ios12app启动速度提升40% 键盘响应速度提升50% 拍摄视频响应速度提...

  • Android Jetpack系列--5. App Startu

    定义 一个可以用于加速App启动速度的库; 提供在 App 启动时初始化组件简单、高效的方法,可以使用 App S...

  • 提升阅读速度的方法

    前面讲了,速读前要做的准备工作,了解自己的心态与动机,情绪的准备,放松,集中注意力,还有80/20法则。我们还需要...

  • 提升阅读速度的方法

    5.16 Claire 今年的目标之一便是将英文阅读速度提升至中文阅读速度。从周一买了一本英文书,慢悠悠地读,明明...

网友评论

      本文标题:5个可以提升RN app 速度的方法

      本文链接:https://www.haomeiwen.com/subject/ittjeftx.html