【React自制全家桶】六、React性能优化（持续更新总结）

最新推荐文章于 2024-01-11 09:39:48 发布

原创最新推荐文章于 2024-01-11 09:39:48 发布 · 226 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#React性能优化

react 专栏收录该内容

9 篇文章

订阅专栏

本文介绍React应用性能优化的五大策略，包括利用虚拟DOM提升性能、合并多次setState操作、合理使用bind绑定、设置shouldComponentUpdate方法及PureComponent组件，旨在帮助开发者有效提升React应用的效率。

一、通过虚拟DOM来提升性能（自动）

　　　　底层讲解见【React自制全家桶】二、分析React的虚拟DOM和Diff算法

二、将多次setState合并为一次执行（自动）

　　　　底层讲解见【React自制全家桶】二、分析React的虚拟DOM和Diff算法

三、将bind绑定放置在constructor上（手动）

constructor(props){
    // 继承
    super(props);
    //保障只执行一次，减少无谓渲染
    this.handleDelete = this.handleDelete.bind(this);
}

四、在子组件中设置shouldComponentUpdate()函数（手动）

shouldComponentUpdate(nextProps,nextState){
    // 提升性能
    //nextProps为下一个Props将变化成的值
    if(nextProps.content !== this.props.content){
        return true;
    }else{
        return false;
    }
}

五、使用PureComponent

注意：使用PureComponent的前提是使用immutable来管理数据