React Native性能优化：预加载和缓存View

参考比如我们做IM的时候，从会话列表进入聊天窗口，经常会有点卡顿感觉，因为聊天对话界面的结构相对比较复杂。如果每次进去都需要重新构建渲染，肯定无法在16ms内完成。解决方法就是准备一个聊天对话界面的样板，在app启动的时候将它预先加载。当需要渲染的时候，只需要将修改对应的值就可以，退去时不要去销毁它，直接cache下来留给下次使用。

具体在react native上怎么实现，这需要定制自己的navigator，因为react native提供的navigator没有这种功能。具体原理就是在navigator的render函数里一直保留需要预先加载和缓存的view，当不需要显示的时候将它隐藏起来。同时需要缓冲的view一定要有初始样板。

//navigator
<MYNavigator
          {... this.props}
          routeState={routes}
          preLoad={['b']}
          routesMap={{
            "a":<A></A>,
            "b":<B></B>,
            "c":<C></C>
          }}

/>

//navigator组件的render方法
_renderSense(){

    var res=this.state.senses.map(((senseKey)=>{
        const SenseView =this.props.routesMap[senseKey.key].type
        return (
                <Card key={senseKey.key} curSense={senseKey.key} 
                    index={this.state.index} {... this.props} >
                    <SenseView dispatch={this.props.dispatch}> 
                    </SenseView>
                </Card>
        );
    }).bind(this))
    //预先加载和cache
    var preLoad=this._renderPreLoadFunc()

    return res.concat(preLoad);
}


//预先加载的样板的reducer
initData=Array(100).fill(-1).map((item,index)=>this.tick+':'+index);
export  default function routes(state = initData, action) {
    switch (action.type) {

        case  "UPDATE" :{
            return [...action.data]
        }
        default:
            return state

    }
}