ReactNative性能优化

前言

本文将从以下5个方面介绍我之前用到的ReactNative性能优化方式：

生产环境下日志输出禁用
采用setNativeProps
Android硬件加速
长列表加载
首屏进入时间优化

生产环境下日志输出禁用：

接入babel-plugin-transform-remove-console

npm install babel-plugin-transform-remove-console --save-dev

配置.babelrc

{
  ...
  "plugins": [
    ...
  ],
  "env": {"production": {
      "plugins": [["transform-remove-console", {"exclude": ["error"]}]]
  }
  }
}

采用setNativeProps

在RN中，如果需要频繁刷新view，建议使用setNativeProps，避免使用setState导致的频繁render。

类似顶部tab的透明度渐变，就适用这种情况

官方原文建议在（不得不）频繁刷新而又遇到了性能瓶颈的时候。直接操作组件并不是应该经常使用的工具。一般来说只是用来创建连续的动画，同时避免渲染组件结构和同步太多视图变化所带来的大量开销。setNativeProps 是一个“简单粗暴”的方法，它直接在底层（DOM、UIView等）而不是React组件中记录state，这样会使代码逻辑难以理清。所以在使用这个方法之前，请尽量先尝试用setState 和shouldComponentUpdate方法来解决问题。

使用PureComponent或shouldComponentUpdate

PureComponent

当组件更新时，如果组件的 props 和 state 都没发生改变， render 方法就不会触发，省去 Virtual DOM 的生成和比对过程，达到提升性能的目的。

具体原理是在shouldComponentUpdate回调中，对oldState和newState 及 oldProps和newProps进行浅比较，如不同，才return true，进而回调render。

重写shouldComponentUpdate

shouldComponentUpdate() {
     return this.state.update;
 }

控制在需要的时候才去刷新，根据需求或者业务去控制。

Android硬件加速

通过启用View的renderToHardwareTextureAndroid属性为true，可以开启View的硬件加速。（决定这个视图是否要把它自己（以及所有的子视图）渲染到一个 GPU 上的硬件纹理中。）

在 Android 上，这对于只修改不透明度、旋转、位移、或缩放的动画和交互十分有用：在这些情况下，视图不必每次都重新绘制，显示列表也不需要重新执行。纹理可以被重用于不同的参数。负面作用是这会大量消耗显存，所以当交互/动画结束后应该把此属性设置回 false。

长列表加载

使用用复用性更强的FlatList或SectionList

FlatList或SectionList优化：

Item采用PureComponent或重写shouldComponentUpdate
getItemLayout 如果行高是固定的，可以使用getItemLayout，避免动态测量内容尺寸的开销。

首屏进入时间优化

减少bundle包大小

图片压缩；
把不重要图片上传到图床
分包加载（这个说来话长，要单独讲了）

懒加载

JS在执行import时有时很需要时间，首屏不需要展示的组件可以懒加载

import React, { Component } from 'react';
import { TouchableOpacity, View, Text } from 'react-native';

// 先把这个组件赋值为null
let VeryExpensive = null;

export default class Optimized extends Component {
  state = { needsExpensive: false };

  didPress = () => {
    if (VeryExpensive == null) {
        // 真正需要这个组件的时候才加载
      VeryExpensive = require('./VeryExpensive').default;
    }

    this.setState(() => ({
      needsExpensive: true,
    }));
  };

  render() {
    return (
      <View style={{ marginTop: 20 }}>
        <TouchableOpacity onPress={this.didPress}>
          <Text>Load</Text>
        </TouchableOpacity>
          // 根据需要判断是否渲染该组件
        {this.state.needsExpensive ? <VeryExpensive /> : null}
      </View>
    );
  }
}

使用BindingX

理论上任何 "频繁通信+UI更新" 的场景都可以使用BindingX来优化卡顿问题。

安装： npm install react-native-bindingx --save

适用场景：

监听 pan 手势，更新UI。
监听滚动容器(如List)的onscroll事件，更新UI。
监听设备传感器方向变化，更新UI。
动画。(即监听设备的每一帧的屏幕刷新回调事件，更新UI)。

其他优化方式

请参考：react性能优化