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里拼接比较快一点