美文网首页
ReactNative性能优化相关

ReactNative性能优化相关

作者: 卫龙山 | 来源:发表于2019-07-09 11:08 被阅读0次

    1,Component Key

    如果component用了random key,那么react会在做虚拟dom比较的时候,就会认为是两个dom,render的时候就会重新绘制所有组件。如果我们在home里面用了random key,那么每次render home的时候,必然重新绘制整个app,不管用什么方式优化性能都不会起作用。因为虚拟dom的根节点变了。

    所有我们代码里不要给component设置random key。

    2,FlatList,  SectionList回调函数赋值

    由于sectionlist、flatlist是purecomponent,purecomponent在做虚拟dom比较的时候,会做一个浅判断:如果子组件的props或者state没有变化,则不重新绘制该组件。

    如果render list对某个属性赋值时做bind操作,则会导致list的该属性在每次render的时候都不一样(每次bind都会赋值一个新对象),就会导致list重新刷新,影响性能。

    wrong

    为了优化list的性能,不要在对flatlist、sectinlist的回调函数赋值时进行bind,对list赋值的回调函数最好在constructor里赋值,然后在render的时候只赋值一个变量。

    good

    3,动画效果

    动画效果不要用timer的setInterval或者频繁setState,不然会卡顿。应用animated实现。

    InteractionManager

    InteractionManager.runAfterInteractions是为了将需要长时间处理的任务如网络请求等放入InteractionManager异步执行,好防止其影响用户交互、动画效果等。

    不要在InteractionManager.runAfterInteractions里执行动画效果。

    相关文章

      网友评论

          本文标题:ReactNative性能优化相关

          本文链接:https://www.haomeiwen.com/subject/nzngfxtx.html