RN性能优化及事件监听

Posted gongchenghui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了RN性能优化及事件监听相关的知识,希望对你有一定的参考价值。

自从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的动画效果可以平滑流畅的执行。可以大大提升用户体验。

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

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

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

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

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

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

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

3、方法与属性

  1. runAfterInteractions(task) 静态方法,在用户交互和动画结束以后执行任务
  2. createInteractionHandle() 静态方法,创建一个句柄(处理器),通知管理器,某个动画或者交互开始了
  3. clearInteractionHandle(handler:Handle) 静态方法,进行清除句柄,通知管理器,某个动画或者交互结束了。
  4. setDeadline(deadline:number) 静态方法, 设置延迟时间,该会调用setTimeout方法挂起并且阻塞所有没有完成的任务,然后在eventLoopRunningTime到设定的延迟时间后,然后执行setImmediate方法进行批量执行任务
  5. Events:CallExpression
  6. 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性能优化及事件监听的主要内容,如果未能解决你的问题,请参考以下文章

性能优化之-事件代理

Vue2.5开发去哪儿网App 城市列表开发之 兄弟组件间联动及列表性能优化

vue项目性能优化

在同一个片段中实现多个事件监听器 - Android

ListView中button监听器 设置 及 优化

Java字符串拼接数字转换字符串性能测试与优化方案