最近做RN遇到了一些性能瓶颈,逼着自己不得不做一些优化
已经做过,或者尝试过得优化方案:
1、点击效果防止重复点击。
2、左右两边分别用两个异步栈进行更新,这样能让右边的缓慢不影响左边的更新。
3、InteractionManager.runAfterInteractions(() => {
// ...耗时较长的同步执行的任务...
});
4、数据setstate 异步更新,改成mobx观察者模式,即时更新
5、切换使用navigation进行
6、shouldComponentUpdate拦截更新
-------------------------------------------------------------------------------------------------------------------------
然而。。。。。都没有解决问题
看一下例子:
const listobj = {'A': []}
渲染方式1、
setState({
key: 'A',
list: listobj['A']
})
render() {
return (
<>
<div>
{
this.state.list.map((item)=>{
})
}
</div>
<div>
{this.state.key}
</div>
</>
)
}
渲染方式2、
setState({
key: 'A'
})
render() {
let list = listobj[this.state.key]
return (
<>
<div>
{
list.map((item)=>{
})
}
</div>
<div>
{this.state.key}
</div>
</>
)
}
渲染方式1感觉会比较好一些,在state里控制所有的数据,但是,事实上,渲染方式2会很好,state里尽量少管理数据,逻辑写到子组件里去。
性能提高总结:
1、组件化,各个部分形成组件,进行局部刷新,互相不影响
2、setstate尽量少用,数据更新尽量少,render里拼接比较快一点