React Native 机能优化 （官网指南搬运）

2019年8月20日 269次阅读 来源: 罗高

最近在写React-Native 趁着这两天需求差不多完成了，实践了一些优化项。

纪录于此

Life sucks

Performance

参考 React native Performance

检察机能

翻开开辟者菜单（摇摆手机翻开）👉 翻开Show Perf Monitor 能够看到下图显现框

《React Native 机能优化 （官网指南搬运）》

UI 和 JS 的帧数都稳固保持在60 为最优状况。

JS 的单线程

一切的事宜处置惩罚，API要求，等操纵都在这个线程上，在this.setState大批数据时，状况的变动会致使re-render，这时刻期一切由JavaScript 掌握的动画都邑涌现卡顿掉帧

比方在切换路由时，帧数会有显著发抖。此时假如有一些在componentDidMount 实行的操纵就会使得路由过渡动画异常卡顿。（后面会引见一些能够尝试的解决方案

开辟环境机能比临盆环境差

开辟环境下框架会有许多别的操纵比方warning error 的输出，范例检测等等。

假如要测试机能，最幸亏release 包测试。如许越发精准。

临盆环境移除console.*

开辟时，会有许多console.* 指令来协助调试。而且一些依靠库也会有console.* 这些语句对JavaScript 线程来说是一个极大的斲丧。能够经由历程Babel 在临盆环境中移撤除console.*。

  • 装置插件

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

  • 设置.babelrc 文件

    {
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

处置惩罚大批数据列表时运用<FlatList />

FlatList 组件越发适宜来展现长列表，而且指定适宜的 getItemLayout 要领， getItemLayout 会跳过衬着Item 时的规划盘算，直接运用给定的设置（概况检察链接☝️）

依靠懒加载

在框架实行编写好的营业代码前，须要把在内存中加载并剖析代码，代码量越大这个历程就更耗时，致使首屏衬着速率过慢。而且往往会涌现一些页面或许组件基础不会被用户访问到。这时刻能够经由历程懒加载来优化。

官网有给出例子

VeryExpensive.js

import React, { Component } from 'react';
import { Text } from 'react-native';
// ... import some very expensive modules

// You may want to log at the file level to verify when this is happening
console.log('VeryExpensive component loaded');

export default class VeryExpensive extends Component {
  // lots and lots of code
  render() {
    return <Text>Very Expensive Component</Text>;
  }
}

Optimized.js

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

let VeryExpensive = null; //定义变量

export default class Optimized extends Component {
  state = { needsExpensive: false }; // 定义内部状况来掌握组件是不是须要加载

  didPress = () => {
    // 在触发须要加载组件的事宜时
    if (VeryExpensive == null) { // 不反复援用
      VeryExpensive = require('./VeryExpensive').default;  // 把组件的援用赋给定义好的变量
    }

    this.setState(() => ({
      needsExpensive: true, // 变动掌握的状况，触发组件re-render
    }));
  };

  render() {
    return (
      <View style={{ marginTop: 20 }}>
        <TouchableOpacity onPress={this.didPress}>
          <Text>Load</Text>
        </TouchableOpacity>
        {this.state.needsExpensive ? <VeryExpensive /> : null}
      </View>
    );
  }
}

优化组件衬着次数

React 在内部state 或许外部传入的props 发作转变时，会从新衬着组件。假如在短时间内有大批的组件要从新衬着就会形成严峻的机能题目。这里有一个能够优化的点。

  • 运用PureComponent 让组件本身比较props 的变化来掌握衬着次数，实践下来这类可控的体式格局比纯函数组件要靠谱。或许在Component 中运用 shouldComponentUpdate 要领，经由历程前提推断来掌握组件的更新/从新衬着。
  • 运用PureComponent 时要注重这个组件内部是浅比较状况，假如props 的有大批援用范例对象，则这些对象的内部变化不会被比较出来。所以在编写代码时只管防止庞杂的数据结构
  • 细粒度组件，拆分动态/静态组件。须要在项目稳固并有肯定范围厥后统一规划。
  • 进修 immutable-js

异步，回调

JavaScript 单线程，要应用好它的异步特征，和一些钩子回调。

比方上面提到路由切换时componentDidMount 中的操纵会致使卡顿，这里能够运用 InteractionManager.runAfterInteractions() 将须要实行的操纵放到runAfterInteractions 的回调中实行。

componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
        // your actions
    })
}

须要注重的是 InteractionManager 是监听一切的动画/交互 完成以后才会触发 runAfterInteractions 中的回调，假如项目中有一些长时间动画或许交互，可能会涌现长时间守候。所以 因为 InteractionManager 的不可控性，运用的时刻要根据实际状况调解。

在react-native 中的一些动画反应，比方TouchableOpacity 在触摸时会相应 onPress 而且 本身的通明度会发作变化，这个历程当中假如 onPress 中有庞杂的操纵，很可能会致使组件的通明反应卡顿，这时刻能够将onPress 中的操纵包裹在 requestAnimationFrame 中。这里给出一个我的实践（应用styled-component）

import styled from 'styled-components'

export const TouchableOpacity = styled.TouchableOpacity.attrs({
  onPress: props => () => {
    requestAnimationFrame(() => {
      props.onPressAsync && props.onPressAsync()
    }, 0)
  }
})``

这里把onPress 改成在 requestAnimationFrame 的回调中实行onPressAsync 传入的操纵。

同理，还在FlatList 的onReachEnd实践了这个操纵，来防止iOS 中转动回弹时实行操纵的卡顿。

以上，纪录了近期写React-Native 的一些实践过的优化项。

末了

路漫漫其修远兮，吾将高低而求索

May love & peace be with you

参考

本文作者： Roy Luo

本文链接： React Native 机能优化 （官网指南搬运）

    原文作者：罗高
    原文地址: https://segmentfault.com/a/1190000017946217
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞