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