React Native中事件监听和持久化存储的结构化设计



  • 这里主要介绍,我对于React Native中的DeviceEventEmitter和AsyncStorage的封装。

    两个仓库:

    设计思想

    在应用开发中,我们经常把整个应用分成多个模块,这些模块都有各自的事件监听和持久化存储的需求,而且有些时候,对用户登陆后的信息的存储需要携带userId作为标识,方便退出时清除。

    这样,我考虑将DeviceEventEmitter和AsyncStorage的key设计成数组样式,对应实际业务逻辑的层级结构。

    比如登陆模块的用户登陆登出事件,其key可以分别写作:

    const loginEvent = ['UserLogPart', 'login'];
    const logoutEvent = ['UserLogPart', 'logout'];
    

    登陆前和登陆后的存储信息可以记做:

    const serverUrlKey = ['common', 'server_url'];
    const userInfoKey = ['用户ID', 'info'];
    

    这样在事件监听中,可以很方便的监听某一类事件,比如我们发消息的事件定义为['im', 'message_send', '会话ID'],则我们可以监听['im', 'message_send']即可获取每一个会话发消息的事件。

    存储也是类似,可以获取或清除每一类的信息,比如我们可以直接清除['用户ID'],则对应的['用户ID', x1, x2, ...]等等都会被清除。

    这样设计的好处是模块自己维护自己的事件,而且不会重名,不会像iOS或者Android中写很长很长的事件名来防止重名。同时结构清晰,代码易于维护,便于批量操作。

    DeviceEventEmitter

    封装的库位于react-native-general-listener

    这个库中的事件类型,可以是一个字符串/对象(等价于长度为1的数组),也可以是一个字符串数组。用来代表事件的层级结构。

    我们有两个注册方法:

    • register:直接注册一个事件监听,只监听完全匹配的事件。
    • registerWithSubEvent:注册子事件监听,监听该事件自身以及所有子事件的发生。

    取消注册使用unregister方法,可以取消指定事件监听,也可以取消一个事件下的所有监听。

    还有一个trigger方法,用来触发事件,可以传递一个对象参数,用来表示触发时需要传递的状态。

    以上方法的事件类型都代表事件的层次结构,可以是单一字符串或对象,或是数组类型。

    详细使用方法请参考仓库的README

    AsyncStorage

    封装的库位于react-native-general-storage

    存储引入了分区的概念,一般是分两个区,一个是登陆之前的common区域,一个是登陆之后的user区域。

    const commonPart = '__common__';
    const userPart = '__user__';
    
    // When app start, we set the common prefix
    AsyncStorage.setPrefix(commonPart, commonPart);
    
    // When user login, we set user prefix as default prefix
    const userId = '12345';
    AsyncStorage.setPrefix(userPart, userId, true);
    
    // When user logout, we unset user prefix and remove default prefix
    AsyncStorage.setPrefix(userPart, null);
    

    在App启动或者用户登陆时,设置区域前缀,setPrefix第三个参数传true表示设置为默认区域。前缀为null则表示取消区域。

    具体的使用和AsyncStorage差不多,都是异步Promise的接口,key部分可以是一个字符串或一个数组,每个方法最后都是区域的参数,如果不传则使用默认区域。

    支持方法如下:

    • set:设置值。
    • get:获取值。
    • remove:删除值,单一操作。
    • merge:合并旧值。
    • clear:清理以key开头的所有子信息的值。
    • getKeys:获取以key开头的所有子信息的键。

    详细使用方法请参考仓库的README