[React]—性能优化—(一)

一、immutable简介

    Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗。

　　在js中，引用类型的数据，优点在于频繁的操作数据都是在原对象的基础上修改，不会创建新对象，从而可以有效的利用内存，不会浪费内存，这种特性称为mutable（可变），但恰恰它的优点也是它的缺点，太过于灵活多变在复杂数据的场景下也造成了它的不可控性，假设一个对象在多处用到，在某一处不小心修改了数据，其他地方很难预见到数据是如何改变的，针对这种问题的解决方法，一般就像刚才的例子，会想复制一个新对象，再在新对象上做修改，这无疑会造成更多的性能问题以及内存浪费。

  为了解决这种问题，出现了immutable对象，每次修改immutable对象都会创建一个新的不可变对象，而老的对象不会改变

二、React中如何减少render函数渲染的次数

    在React中我们知道当this.state 、this.props发生改变的时候render函数就会执行，但有些时候this.state、this.props没有发生改变的时候render函数也会执行(具体请自行了解相关案例，如需详解请留言)。那么我们如何来减少render函数渲染的次数来提高React的性能优化？接下来我们可以封装一个BaseComponent来减少React中render函数渲染的次数

import React,{Component}from 'react';import {is} from 'immutable';
class BaseComponent extends Component {    shouldComponentUpdate(newProps, newState) {        const thisProps = this.props || {};        const thisState = this.state || {};        newState = newState || {};        newProps = newProps || {};
        if (Object.keys(thisProps).length !== Object.keys(newProps).length ||            Object.keys(thisState).length !== Object.keys(newState).length) {            return true;        }
        for (const key in newProps) {            if (!is(thisProps[key], newProps[key])) {                return true;            }        }
        for (const key in newState) {            if (!is(thisState[key], newState[key])) {                return true;            }        }        return false;    }}
export default BaseComponent;

继承BsesComponent来创建开发中所需要的组件

import BaseComponent from  "@common/BaseComponent";
export default class Home extends BaseComponent{  constructor(){    super()  }  ........}

注意：本文所进行优化的数据必须统一都是immutable数据，哪怕是this.props