React组件性能优化：PureRender和Immutable Data

megatron 发布于2019-08-20 14:42 / 501人阅读

摘要：插件允许我们在的语法中使用在传递数据时，可以通过进一步提升组件的渲染性能，是针对可变对象和不可变对象所做的折衷。使用之后，仅仅改变状态了的组件及其父组件被重新渲染。

1 前言

网页性能最大的限制因素是浏览器重绘(reflow)和重排版(repaint)，React的虚拟DOM就是为了尽可能减少浏览器的重绘和重排版，从React的渲染过程看，避免不必要的渲染可以进一步提高性能。

2 PureRender

React优化方法中最常见的就是PureRender，PureRender的原理是重新实现shouldComponentUpdate生命周期方法，让当前传入的state和props和之前的做浅比较，如果返回FALSE，组件就不执行render方法，默认情况返回TRUE。react-addons-pure-render-mixin插件允许我们在ES6 的classes语法中使用PureRender：

        import React,{component} from ‘react’;
        import PureRenderMixin from ‘react-addons-pure-render-mixin’;
        
        class App extends Component{
            constructor(props){
                super(props);
                //!!!
                this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
            }
        render(){
            return foo;
            }
        }

3 Immutable Data

在传递数据时，可以通过Immutable Data进一步提升组件的渲染性能，Immutable Data是针对可变对象和不可变对象所做的折衷。可变对象是指多个变量引用一个对象，这导致对象的time和value耦合，对象一旦改变无法重塑；不可变对象是指每次用到一个对象就进行深复制，这导致内存浪费；Immutable Data实现的原理基于持久化数据结构，也就是使用旧数据创建新数据时，旧数据依旧保存，而且为了避免深度复制，Immutable Data使用结构共享，也就是说，如果对象树中的一个节点变化，只修改这个节点和受他影响的父节点，其他节点依旧共享。Immutable Data优点体现在降低了可变数据带来的时间和值的耦合；节省了内存，可以实现数据的时间旅行，也就是说数据可以重塑。

使用Immutable Data可以直接采用Facebook开发的immutable.js库，该库具有完善API，并且和原生JavaScript对象对应。Immutable Data可以和PureRender结合使用，前面提到，PureRender通过浅比较确定shouldComponentUpdate的返回值，但是浅比较可以覆盖的场景不多，深比较成本昂贵。而Immutable.js提供了高效判断数据是否改变的方法，只需要全等算符(===)和自带的is()方法就可以知道是否执行render方法，这个操作几乎是零成本的，所以可以极大地提高性能。使用immutable data之后，仅仅改变状态了的组件及其父组件被重新渲染。

        import React,{ commponent } from "react";
        import { is } from "immutable";
        
        class App extends Component {
            shouldComponentUpdate(nextProps, nextState){
                const thisProps = this.props || {}；
                const thisStae = this.state || {};
                if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
                    Object.keys(thisState).length !== Object.keys(nextState).length){
                    return true;
                }
                for (const keys in nextProps){
                   // !==判断原生对象，is判断immutable对象
                    if (thisProps[key] !== nextProps[key] ||
                            !is(thisProps[key], nextProps[key]))
                        return true;
                }
                for (const key in nextState){
                    if ( thisStae[key] !== nextState[key])||
                        !is(thisStae[key],nextState[key])
                    return true;
                }
            }
        }

问题：Immutable Data可以和PureRender结合使用是简单的作用叠加吗？优先级哪个更高呢？这种作用叠加有没有性能损耗呢？我当前的理解是，react-addons-pure-render-mixin插件引的PureRender有缺陷，因为浅复制有时会导致比较失误，immutable.js仅仅是弥补了这一问题，反而增加了代码量，那为什么不干脆将PureRender去掉，只用immutable.js呢？

idc机房托管混合云性能优化优化系统性能网站性能优化页面性能优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81846.html

React学习之漫谈React

摘要：事件系统合成事件的绑定方式合成事件的实现机制事件委派和自动绑定。高阶组件如果已经理解高阶函数，那么理解高阶组件也很容易的。例如我们常见的方法等都是高阶函数。对测试群众来说，从质量保证的角度出发，单元测试覆盖率是事件系统合成事件的绑定方式 `Test` 合成事件的实现机制：事件委派和自动绑定。 React合成事件系统的委托机制，在合成事件内部仅仅是对最外层的容器进行了绑定，并且依赖...

darkbug 2019-08-23 18:38 评论0 收藏0
react如何性能达到最大化(前传)，暨react为啥非得使用immutable.js

摘要：主要讲述我一步一步优化性能的过程。。才能将的性能发挥到极致要是各位看官用过一段时间的，而没有用那么本文非常适合你。那么多么浪费性能，好。。下一篇我讲写，，如何用一行代码胜过千言万语。。这篇文章呢。。主要讲述我一步一步优化react性能的过程。。为啥要用immutable.js呢。毫不夸张的说。有了immutable.js（当然也有其他实现库）。。才能将react的性能发挥到极致！要是...

jubincn 2019-08-19 17:22 评论0 收藏0
react进阶漫谈

摘要：父组件向子组件之间非常常见，通过机制传递即可。我们应该听说过高阶函数，这种函数接受函数作为输入，或者是输出一个函数，比如以及等函数。在传递数据的时候，我们可以用进一步提高性能。本文主要谈自己在react学习的过程中总结出来的一些经验和资源，内容逻辑参考了深入react技术栈一书以及网上的诸多资源，但也并非完全照抄，代码基本都是自己实践，主要为平时个人学习做一个总结和参考。本文的关键...

neuSnail 2019-08-20 14:16 评论0 收藏0
react进阶漫谈

摘要：父组件向子组件之间非常常见，通过机制传递即可。我们应该听说过高阶函数，这种函数接受函数作为输入，或者是输出一个函数，比如以及等函数。在传递数据的时候，我们可以用进一步提高性能。本文主要谈自己在react学习的过程中总结出来的一些经验和资源，内容逻辑参考了深入react技术栈一书以及网上的诸多资源，但也并非完全照抄，代码基本都是自己实践，主要为平时个人学习做一个总结和参考。本文的关键...

wyk1184 2019-08-30 15:52 评论0 收藏0
react进阶漫谈

摘要：父组件向子组件之间非常常见，通过机制传递即可。我们应该听说过高阶函数，这种函数接受函数作为输入，或者是输出一个函数，比如以及等函数。在传递数据的时候，我们可以用进一步提高性能。本文主要谈自己在react学习的过程中总结出来的一些经验和资源，内容逻辑参考了深入react技术栈一书以及网上的诸多资源，但也并非完全照抄，代码基本都是自己实践，主要为平时个人学习做一个总结和参考。本文的关键...

junnplus 2019-08-01 16:17 评论0 收藏0