参考比如我们做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
}
}
