RN性能优化(重新探索react吧)

最近做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)=>{

item.name

})

}

</div>

<div>

{this.state.key}

</div>

</>

)

}

渲染方式2、

setState({

key: 'A'

})

render() {

let list = listobj[this.state.key]

return (

<>

<div>

{

list.map((item)=>{

item.name

})

}

</div>

<div>

{this.state.key}

</div>

</>

)

}

渲染方式1感觉会比较好一些,在state里控制所有的数据,但是,事实上,渲染方式2会很好,state里尽量少管理数据,逻辑写到子组件里去。

性能提高总结:

1、组件化,各个部分形成组件,进行局部刷新,互相不影响

2、setstate尽量少用,数据更新尽量少,render里拼接比较快一点

上一篇:腾讯优测优分享 | 探索react native首屏渲染最佳实践


下一篇:react初探索--react + react-router + ant-design 后台管理系统配置