最近做RN遇到了一些性能瓶颈，逼着自己不得不做一些优化
<!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 19.0px; font: 13.0px 'Helvetica Neue'; color: #000000} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 19.0px; font: 13.0px 'Helvetica Neue'; color: #000000; min-height: 15.0px} -->
已经做过，或者尝试过得优化方案：
1、点击效果防止重复点击。
2、左右两边分别用两个异步栈进行更新，这样能让右边的缓慢不影响左边的更新。
3、InteractionManager.runAfterInteractions(() => {
// ...耗时较长的同步执行的任务...
});
4、数据setstate 异步更新，改成mobx观察者模式，即时更新
5、切换使用navigation进行
6、shouldComponentUpdate拦截更新
-------------------------------------------------------------------------------------------------------------------------
然而。。。。。都没有解决问题
看一下例子：
<!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 19.0px; font: 13.0px 'Helvetica Neue'; color: #000000} span.s1 {color: #118eff} -->
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里拼接比较快一点
