摘要：深復(fù)制與淺復(fù)制淺復(fù)制同樣的方式深復(fù)制因?yàn)榇鎯?chǔ)對(duì)象都是存地址的，所以淺復(fù)制會(huì)導(dǎo)致和指向同一塊內(nèi)存地址，大概的示意圖如下。

let obj = {
    a: 1,
    arr: [1, 2]
};
let obj1 = obj;            //淺復(fù)制
obj1.a = 2

console.log(obj) // { a:2, arr: [1,2] };

//同樣的方式
let obj = {
    a: 1,
    arr: [1, 2]
};
let obj2 = deepCopy(obj);  //深復(fù)制
obj2.a = 2
console.log(obj) // { a:1, arr: [1,2] };

因?yàn)镴avaScript存儲(chǔ)對(duì)象都是存地址的，所以淺復(fù)制會(huì)導(dǎo)致 obj 和 obj1
指向同一塊內(nèi)存地址，大概的示意圖如下。而深復(fù)制一般都是開辟一塊新的內(nèi)存地址，將原對(duì)象的各個(gè)屬性逐個(gè)復(fù)制出去。

深復(fù)制只有一層，之后為淺復(fù)制（除非再次使用Object.assign嵌套方式賦值）

let obj = {
    a: 1,
    arr: [1, 2]
};
let obj1 = Object.assign({}, obj);

obj1.a = 2
//不變
console.log(obj) // { a:1, arr: [1,2] };



let obj = {
    a: {
        b: 20
    },
    arr: [1, 2]
};
let obj1 = Object.assign({}, obj);

obj1.a.b = 2;
//除非再次使用Object.assign嵌套方式賦值
//變化
console.log(obj) // { a:{b:2}, arr: [1,2] };

下面是項(xiàng)目中實(shí)際的一個(gè)例子

第一種方式

//recduer.js（cart）第一種方式
case types.CART_PUT_MAIN + "_SUCCESS":
    //更新數(shù)據(jù)
    carts = state.main.carts; // carts 選中的id數(shù)組
    id = action.param.id;
    newState = {
        ...state,
        main:{
            ...state.main,
            itemObj:{
                ...state.main.itemObj,
                [id]:{
                    ...state.main.itemObj[id],
                    quantity:action.param.quantity
                    
                }
            }
        }
    };
    sum = sumCommon(carts, newState.main.itemObj);
    newState = {
        ...newState,
        main:{
            ...newState.main,
            ...sum
        }
    };
    return newState;

讓我們來看一下對(duì)數(shù)據(jù)層的變化：

componentWillReceiveProps(nextProps){
    console.log(nextProps); 
    //next：顧名思義是接收到的next->props，輸出的是上面方法中的newState的值
    console.log(this.props);
    //cur：是當(dāng)前的props的值，因?yàn)槭褂玫氖穷恑mmutable的方式，所以數(shù)據(jù)不變；
}

第二種方式

//recduer.js（cart）第一種方式
case types.CART_PUT_MAIN + "_SUCCESS":
    newState = Object.assign({}, state);
    carts = newState.main.carts; // carts 選中的id數(shù)組
    id = action.param.id;
    //淺復(fù)制
    newState.main.itemObj[id].quantity = action.param.quantity;;
    sum = sumCommon(carts, newState.main.itemObj);

    newState = Object.assign({}, newState, {
        main: Object.assign({}, newState.main, sum)
    });
    return newState;

讓我們來再來看一下對(duì)數(shù)據(jù)層的變化：

componentWillReceiveProps(nextProps){
    console.log(nextProps); 
    //next：顧名思義是接收到的next->props，輸出的是上面方法中的newState的值
    console.log(this.props);
    //cur：是當(dāng)前的props的值，而這個(gè)由于淺復(fù)制，這個(gè)值被改變了
}

為了讓數(shù)據(jù)變化更加可測(cè)，我們應(yīng)當(dāng)使用深復(fù)制相關(guān)，讓我們自己的數(shù)據(jù)更加安全

直接{...obj}賦值屬于淺復(fù)制，在修改值時(shí){...obj,a:1}就起到了類深復(fù)制的效果
更新一個(gè) Object ，則：

let obj = {
    a: 0,
    b: 20,
}
obj = {...obj, a: obj.a + 1}

而不是:

obj.a = obj.a + 1

同樣的為了避免對(duì) Object 的 in-place editing，數(shù)組也是一樣：

let arr = [
    { id: 1,a: 1}
]
arr = [...arr, { id: 2,a: 2} ]

而不是：

let arr = [
    { id: 1, a:1}
]
arr.push({ id: 2, a,2});

以這樣的方式，無需 Immutable.js ，我們可以讓應(yīng)用程序狀態(tài)是 不可變（Immutable） 的。

let obj = {
    a: 20,
    arr: [1, 2]
};
let obj1 = { ...obj }; //于obj1=obj一樣
// 保持統(tǒng)一，盡量不要使用這樣的替換（有可能造成不必要的麻煩）
obj1.a = 2
//...盡量使用這樣的賦值形式
obj1 = { ...obj1 , a:2 }
//深復(fù)制
console.log(obj) // { a:20, arr: [1,2] };
console.log(obj1) // { a:2, arr: [1,2] };

...與Object.assign屬于一個(gè)道理(這里和層級(jí)相關(guān))

//你可以將其轉(zhuǎn)化為
let obj = {
    a: {
        b: 20
    },
    arr: [1, 2]
};
let obj1 = obj
obj1 = Object.assign({}, obj1, {
    a: Object.assign({}, obj1.a,{b:2})
});
console.log(obj) //{ a:{b:20}, arr: [1,2] }
console.log(obj) //{ a:{b:2}, arr: [1,2] }

所以盡量使用...代替Object.assign

為什么需要使用immutable.js

之前方式的多層嵌套

//深復(fù)制（類immutable）
newState = {
    ...state,
    main:{
        ...state.main,
        itemObj:{
            ...state.main.itemObj,
            [id]:{
                ...state.main.itemObj[id],
                prop:action.param.props_str,
                product_id:action.param.product_id,
                price:action.param.price
            }
        }
    }
};
//淺復(fù)制
newState.main.itemObj[id].prop = action.param.props_str;
//immutable.js方式
...參考immutable的api吧，暫時(shí)就不提供了--！

簡(jiǎn)單的說就是數(shù)據(jù)變化，比較前后兩次的數(shù)據(jù)是否相同，判斷是否重新render；否則你的父容器一改變數(shù)據(jù)，所有的子組件都重新渲染了，為了增加性能請(qǐng)使用pureRender；

Immutable.js及在React中的應(yīng)用

Immutable 詳解及 React 中實(shí)踐

Immutable as React state

（封裝好的PureRender如下：）

"use strict";

import { is } from "immutable";

let hasOwnProperty = Object.prototype.hasOwnProperty;
function shallowEqual(objA, objB) {
    if (objA === objB || is(objA, objB)) {
        return true;
    }

    if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
        return false;
    }

    let keysA = Object.keys(objA);
    let keysB = Object.keys(objB);

    if (keysA.length !== keysB.length) {
        return false;
    }
    let bHasOwnProperty = hasOwnProperty.bind(objB);
    for (let i = 0; i < keysA.length; i++) {
        if (!bHasOwnProperty(keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
            return false;
        }
    }

    return true;
}
function shallowCompare(instance, nextProps, nextState) {
    return !shallowEqual(instance.props, nextProps) || !shallowEqual(instance.state, nextState);
}
function shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
}
function pureRenderDecorator(component) {
    component.prototype.shouldComponentUpdate = shouldComponentUpdate;
}
module.exports = pureRenderDecorator;

/*使用方式*/
import pureRender from "pure-render-decorator";
//babel配置中引入一個(gè)transform-decorators-legacy插件
@pureRender
class XXX extends React.Component {
    //...
}

PureRender的使用要求：對(duì)于子組件需要什么參數(shù)傳遞什么，不要把一大塊無用的數(shù)據(jù)引入，否則兩次傳入的this.props可能始終會(huì)不一樣，導(dǎo)致PureRender無效