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

原文地址:https://www.cnblogs.com/windseek/p/11283974.html