let obj = object.assign({},{a:1},{b:1})//obj为{a:1,b:1}

import React from 'react'

class Son extends React.Component{

  shouldComponentUpdate(nextProps,nextState){

     //旧的number Object对象的number属性 == 新的number Object对象的number属性

      if(nextProps.numberObject.number == this.props.numberObject.number){

        console.log('前一个对象' + JSON.stringify(nextProps.numberObject)+

                    '后一个对象' + JSON.stringify(this.props.numberObject));

        return false

      }

      return true

  }

  render(){

    const {index,numberObject,handleClick} = this.props

    //在每次渲染子组件时，打印该子组件的数字内容

    console.log(numberObject.number);

    return <h1 onClick ={() => handleClick(index)}>{numberObject.number}</h1>

  }

}

class Father extends React.Component{

  constructor(props) {

    super(props);

    this.state = {

      numberArray:[{number:0 /*对象中其他的属性*/},

                   {number:1 /*对象中其他的属性*/},

                   {number:2 /*对象中其他的属性*/}

                   ]

    }

  }

  //点击后使numberArray中数组下标为index的数字值加一，重渲染对应的Son组件

  handleClick = (index) => {

     let preNumberArray = this.state.numberArray

     //把做修改的number Object先拷贝到一个新的对象中，替换原来的对象

     preNumberArray[index] = Object.assign({},preNumberArray[index])

     //使新的number Object对象的number属性加一，旧的number Object对象属性不变

     preNumberArray[index].number += 1;

     this.setState({numberArray:preNumberArray})

  }

  render(){

    return(<div style ={{margin:30}}>{

              this.state.numberArray.map(

                (numberObject,key) => {

                 return <Son

                           key = {key}

                           index = {key}

                           numberObject ={numberObject}

                           handleClick ={this.handleClick}/>

                }

                )

              }

           </div>)

  }

}

export default Father

const { fromJS } = require('immutable')

let obj1 = fromJS({name:'李达康'}),obj2;

obj2 = obj1;//obj2取得与obj1相同的值，但两个引用指向不同的对象

obj2 = obj2.set('name','祁同伟');//设置obj2的name属性值为祁同伟

console.log('obj1.name =' + obj1.get('name'));//obj1.name =李达康

console.log('obj2.name =' + obj2.get('name'));//obj2.name =祁同伟

【注意】

1这个时候obj1=obj2并不会使两者指向同一个堆内存中的对象了！所以这成功绕过了我们前面的所提到的对象赋值表达式所带来的坑。所以我们可以随心所欲地像使用普通基本类型变量复制 (a=b)那样对对象等引用类型赋值（obj1 = obj2）而不用拷贝新对象

2对于immutable对象，你不能再用obj.属性名那样取值了，你必须使用immuutable提供的API

• fromJS(obj)把传入的obj封装成immutable对象，在赋值给新对象时传递的只有本身的值而不是指向内存的地址。
• obj.set(属性名，属性值)给obj增加或修改属性，但obj本身并不变化，只返回修改后的对象
• obj.get(属性名)从immutable对象中取得属性值

1优点：深拷贝/浅拷贝本身是很耗内存，而immutable本身有一套机制使内存消耗降到最低

2缺点：你多了一整套的API去学习，并且immutable提供的set,map等对象容易与ES6新增的set,map对象弄混

import React from 'react'

const { fromJS } = require('immutable')

class Son extends React.Component{

  shouldComponentUpdate(nextProps,nextState){

     //旧的number Object对象的number属性 == 新的number Object对象的number属性

      if(nextProps.numberObject.get('number') == this.props.numberObject.get('number')){

        return false

      }

      return true

  }

  render(){

    const {index,numberObject,handleClick} = this.props

    console.log(numberObject.get('number'));

    //在每次渲染子组件时，打印该子组件的数字内容

    return <h1 onClick ={() => handleClick(index)}>{numberObject.get('number')}</h1>

  }

}

class Father extends React.Component{

  constructor(props) {

    super(props);

    this.state = {

      numberArray:fromJS([{number:0 /*对象中其他的属性*/},

                          {number:1 /*对象中其他的属性*/},

                          {number:2 /*对象中其他的属性*/}

                        ])

    }

  }

  //点击后使numberArray中数组下标为index的数字值加一，重渲染对应的Son组件

  handleClick = (index) => {

     let preNumberArray = this.state.numberArray

     //使新的number Object对象的number属性加一，旧的number Object对象属性不变

     let newNumber = preNumberArray.get(index).get('number') + 1;

     preNumberArray = preNumberArray.set(index,fromJS({number: newNumber}));

     this.setState({numberArray:preNumberArray})

  }

  render(){

    return(<div style ={{margin:30}}>{

              this.state.numberArray.map(

                (numberObject,key) => {

                 return <Son

                           key = {key}

                           index = {key}

                           numberObject ={numberObject}

                           handleClick ={this.handleClick}/>

                }

                )

              }

           </div>)

  }

}

export default Father

import React, { PureComponent } from 'react'

class YouComponent extends PureComponent {

render() {

// ...

}

}