自从React Native出世，虽然官方一直尽可能的优化其性能，为了能让其媲美原生App的速度，但是现实感觉有点不尽人意。接下来介绍下实践中遇到的一些性能问题以及优化方案。

一、StackNavigator页面切换动画优化

场景：在navigation还没出来时，导航路由使用NavigatorIOS来实现，页面切换是很流畅的，但是用了StackNavigator navigation发现页面切换会使JS线程出现严重的掉帧（卡顿现象）；

原因：
NavigatorIOS的切换动画是跑在UI主线程上，而不是JS线程上的，所以不受JS线程上的掉帧影响；但是NavigatorIOS是但平台专用，在我们业务开发中是不能使用的；而react-navigation是跨平台的，也是官方推荐使用的；

问题：
react-navigation在从A页面push到B页面时，如果B页面render存在大量可操作的视图结构，或者componentDidMount方法里面做了耗时的操作，会发现丢帧的现在，也就是页面页面会卡顿2s左右，从用户体验上来讲是非常不友好的。

react-navigation动画是由JS线程控制的

想象一下“从右边推入”这个场景的切换：每一帧中，新的场景从右向左移动，从屏幕右边缘开始（不妨认为是320单位宽的的x轴偏移），最终移动到x轴偏移为0的屏幕位置。切换过程中的每一帧，JavaScript线程都需要发送一个新的x轴偏移量给主线程。

由于JS就是一单线程的，他会优先处理自页面的dom构建，以及componentDidMount中的事件处理，这是JS线程就无法处理转场动画了，知道处理完自页面释放之后在来处理动画，这就导致切换页面出现卡顿现象

解决方案：
使用API InteractionManager，它的作用就是可以使本来JS的一些操作在动画完成之后执行，这样就可确保动画的流程性

InteractionManager简介

1、可以提升用户体验和交互效果的模块InteractionMnager(交互管理器)

2、基本内容

使用InteractionManager可以让一些耗时的任务在交互操作或者动画完成之后进行执行，这样使用可以保证我们的JavaScript的动画效果可以平滑流畅的执行。可以大大提升用户体验。

在应用开发中我们可以如下进行执行任务

扫描二维码关注公众号，回复： 2137364 查看本文章

InteractionManager.runAfterInteractions(() => {
 
  //执行耗时的同步任务
 
});

该模块和其他相关的调度方法对比:

requestAnimationFrame():执行控制动画效果的代码
setImmediate/setTimeout():设置延迟执行任务的时间，该可能会影响到正在执行的动画
runAfterInteractions():延迟执行任务，该不会影响到正在执行的动画效果

触摸系统中的单点或者多点触控都是交互动作，耗时任务会在这些触摸交互动作执行完成之后或者取消以后回调runAfterInteractions()方法进行执行。

runAfterInteractions任务也可以接收一个普通的回调函数或者一个带有gen方法并且返回一个Promise的PromiseTask对象。如果参数是PromiseTask对象，那么任务是异步执行的，也会阻塞。该会等着当前任务执行完毕以后才能执行下一个任务。

默认情况下，队列任务会一次性在setImmediate方法中批量执行。如果你通过setDeadline方法设置一个时间值，那么任务会在延迟该设定值时间进行执行。这时候会调用setTimeout方法进行挂起任务并且阻塞其他任务的执行。这样可以给触摸交互等操作留出时间更好的相应用户操作。

3、方法与属性

runAfterInteractions(task) 静态方法,在用户交互和动画结束以后执行任务
createInteractionHandle() 静态方法，创建一个句柄(处理器)，通知管理器，某个动画或者交互开始了
clearInteractionHandle(handler:Handle) 静态方法，进行清除句柄，通知管理器，某个动画或者交互结束了。
setDeadline(deadline:number) 静态方法, 设置延迟时间，该会调用setTimeout方法挂起并且阻塞所有没有完成的任务，然后在eventLoopRunningTime到设定的延迟时间后，然后执行setImmediate方法进行批量执行任务
Events:CallExpression
addListener:CallExpression

4、具体使用

开发中关于卡顿的解决：
先在render中渲染一个空视图，等转场动画完成以后，再去渲染世纪的视图

代码如下：

//页面引入InteractionManager
import {
    AppRegistry,
    StyleSheet, Text, ScrollView, Image, Alert, TouchableOpacity, InteractionManager, View, ImageBackground, DeviceEventEmitte } from "react-native"; class Redeem extends Component { constructor(props) { super(props); this.state = { renderPlaceholderOnly: true//交互管理器延时控制标识 }; } /** * 页面初始化先渲染空视图减少页面转场时间 */ _renderPlaceholderView = () => { return ( <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}> <Image style={{ width: 150, height: 150, backgroundColor: "#f5f5f5" }} source={require("./../../img/task/loading.gif")} /> </View> ); }; render() { //首先渲染空视图 if (this.state.renderPlaceholderOnly) { return this._renderPlaceholderView(); } return( //页面dom ... ) } componentDidMount() { //转场动画完成之后改变标记值，重新渲染dom InteractionManager.runAfterInteractions(() => { this.setState({ renderPlaceholderOnly: false }); }); } }

二、事件监听

场景：在页面跳转是如从A页面路由跳转到B页面，需要在B页面更新了数据，返回A页面是需要更新A页面数据

问题：
由于react路由是基于hash来实现的，从A页面路由跳转到B页面，会在URL上拼接页面对应的hash值，从B页面在返回A页面时，去除URL上的hash值，相当于改变了URL，此时A页面会重新加载，从而达到刷新页面的效果；

但是react-navigation的路由跳转是基于栈来实现的，A路由跳转B，就是一个压栈的过程，就是把页面B push到栈顶，从B返回到A是就是pop弹栈，此时对于页面A来说是无感知的，就是把B页面从栈中pop出去，此时对于开发者来说就无法感知B页面的返回操作了；

解决方案：

使用RN神器发送和接收事件DeviceEventEmitter

具体使用如下：

页面A：

//首 先导入DeviceEventEmitter组件 import { StyleSheet, Text, ScrollView, Image, Alert, TouchableOpacity, TouchableWithoutFeedback, TouchableHighlight, InteractionManager, View, FlatList, SectionList, DeviceEventEmitter } from "react-native"; //要在A页面写一个接收消息的方法 //在didmount方法中写好监听/接收方法，当有消息发送时，这就会接收到，并执行相应方法 componentDidMount() { //收到监听 事件监听 //从新手任务页面或者积分兑换页面返回需要监听 然后更新任务首页总积分 //原因：新手任务页面和积分兑换页面都会设计积分的变更，但是返回任务首页时不会刷新页面， //所以需要监听返回状态，在主动调用接口 this.listener = DeviceEventEmitter.addListener("left", (e) => { //e就是从页面B发送过来的数据 if (e) { this.getAllTntegral(); } Toast.info(e); }); } } //当然，别忘了要卸载 componentWillUnmount() { // 移除监听 this.listener.remove(); }

页面B
//首 先导入DeviceEventEmitter组件 import { StyleSheet, Text, ScrollView, Image, Alert, TouchableOpacity, View, ImageBackground, InteractionManager, FlatList, DeviceEventEmitter } from "react-native"; //可根据自己的业务场景来实现消息发送的时机，本人用法是在B页面返回时，给A页面发消息通知 class NewTask extends Component { static navigationOptions = ({ navigation }) => ({ headerTitle: `${navigation.state.params.title}`, headerLeft: ( <TouchableOpacity style={styles.action} onPress={() => { //给监听事件赋值 DeviceEventEmitter.emit("left", "back"); navigation.goBack(); }}> <View style={styles.headerLeft} /> </TouchableOpacity> ) // headerBackTitle: `${navigation.state.params.title}` }); }

RN性能优化及事件监听