在上一節實現了簡單的效能優化，但是因為需要一次深拷貝和屬性對比，效能還是不好，遂這裡使用Facebook大神寫的immutable.js進行進一步優化

immutable.js JavaScript的不可變集合

每次修改都會返回一個新的物件，上一個物件始終會保持在哪裡，他提供一些常用的資料型別， 供我們使用，常見的資料型別如下：

• List：有序索引集，類似於 JavaScript 中的 Array。
• Map：類似於 JavaScript 中的 Object。

這裡只展示兩個最常用的資料型別，想知道更多的型別，可以去immutabl官網 檢視

• 簡單的做法

let immutable =
 
 require('immutable')
let {Map, List} = immutable


let obj1 = Map({name: 'leo', age: 12)
console.log(obj1) // Map { "name": "leo", "age": 12 }
                
let obj2 = obj1.set('name', 'hello')
// 簡單的用法， 返回的物件和之前的物件是不一樣的，以下案例為證
console.log(obj2) // Map { "name": "hello", "age": 12 }
console.log(obj1 ===
 
 obj2) // false

• 屬性會共享

let immutable = require('immutable')
let {Map, List, fromJS} = immutable

let obj1 = fromJS({ name: 'leo', age: 12, home: { name: 'shenzhen' } })
let obj2 = obj1.set('name', 'hello')

// 屬性會共享
console.log(obj1.home === obj2.home) // true
// 獲取物件的屬性數量
console.log(obj1.size) // 3
console.
 
log(obj1.count()) // 3

• map的痛點

雖然map很好用，但是map只能執行一層，我們對2級更新屬性會報錯，需要是使用fromjs來處理物件

設定值 一層使用set，多層使用setIn

/取值：一層使用get，多層使用getIN

let immutable = require('immutable')
let {Map, fromJS} = immutable

let obj1 = fromJS({ name: 'leo', age: 12, home: { name: 'shenzhen' } })
let obj2 = obj1.set('name', 'hello')
let obj3 = obj1.setIn(['home', 'name'], 'new Name')

console.log(obj3) // Map { "name": "leo", "age": 12, "home": Map { "name": "new Name" } }
console.log(obj3.getIn(['home', 'name'])) // new Name

• 跟新值，update

let immutable = require('immutable')
let {Map, fromJS} = immutable

let obj1 = fromJS({ name: 'leo', age: 12, home: { name: 'shenzhen' } })
let obj2 = obj1.set('name', 'hello')
let obj3 = obj1.setIn(['home', 'name'], 'new Name')
let obj4 = obj3.update('age', val => val + 1)

console.log(obj3) // Map { "name": "leo", "age": 12, "home": Map { "name": "new Name" } }
console.log(obj3.getIn(['home', 'name'])) // new Name
console.log(obj4) // Map { "name": "leo", "age": 13, "home": Map { "name": "new Name" } }

• 刪除某個屬性

let immutable = require('immutable')
let {Map, fromJS} = immutable

let obj1 = fromJS({ name: 'leo', age: 12, home: { name: 'shenzhen' } })
let obj2 = obj1.set('name', 'hello')
let obj3 = obj1.setIn(['home', 'name'], 'new Name')
let obj4 = obj3.update('age', val => val + 1)
let obj5 = obj4.delete('age')

console.log(obj5) // Map { "name": "leo", "home": Map { "name": "new Name" } }

• 清空物件

let immutable = require('immutable')
let {Map, fromJS} = immutable

let obj1 = fromJS({ name: 'leo', age: 12, home: { name: 'shenzhen' } })
let obj2 = obj1.set('name', 'hello')
let obj3 = obj1.setIn(['home', 'name'], 'new Name')
let obj4 = obj3.update('age', val => val + 1)
let obj5 = obj4.delete('age')
let obj6 = obj4.clear()

console.log(obj6) // Map {}

• 合併物件 merge

let immutable = require('immutable')
let {Map, fromJS} = immutable

let obj1 = fromJS({ name: 'leo', age: 12, home: { name: 'shenzhen' } })
let obj2 = obj1.set('name', 'hello')
let obj3 = obj1.setIn(['home', 'name'], 'new Name')
let obj4 = obj3.update('age', val => val + 1)
let obj5 = obj4.delete('age')
let obj6 = obj4.clear()
let obj7 = obj6.merge({name: 'world', gender: 'man'})

console.log(obj7) // Map { "name": "world", "gender": "man" }

• 型別轉換

let immutable = require('immutable')
let {Map, fromJS} = immutable

let obj1 = fromJS({ name: 'leo', age: 12, home: { name: 'shenzhen' } })
let obj2 = obj1.set('name', 'hello')
let obj3 = obj1.setIn(['home', 'name'], 'new Name')
let obj4 = obj3.update('age', val => val + 1)
let obj5 = obj4.delete('age')
let obj6 = obj4.clear()
let obj7 = obj6.merge({name: 'world', gender: 'man'})

console.log(obj7.toJS()) // { name: 'world', gender: 'man' }
console.log(obj7.toJSON()) // { name: 'world', gender: 'man' }
console.log(obj7.toObject()) // { name: 'world', gender: 'man' }

immutable.js list資料型別的簡單使用

操作方法和陣列類似

let immutable = require('immutable')
let { Map, List, fromJS } = immutable

let arr1 = List([1, 2, 3])
let arr2 = arr1.push(4)
let arr3 = arr2.pop()
let arr4 = arr3.map(item => item * 2)
let arr5 = arr4.filter(item => item < 5)

console.log(arr5) // List [ 2, 4 ]

let arr6 = arr5.update(1, val => val * 100)
console.log(arr6)  // List [ 2, 400 ]

let arr7 = arr6.delete(0)
console.log(arr7) // List [ 400 ]

let arr8 = arr7.push(12)
console.log(arr8) // List [ 400, 12 ]

let arr9 = arr8.last()
console.log(arr9) // 12

immutable.js 對比方法

let {is, Map} = require('immutable')
let obj1 = Map({name: 'hello', age: 12})
let obj2 = Map({name: 'hello', age: 12})

console.log(Object.is(obj1, obj2)) // false
// immutable的is方法比較的是值
console.log(is(obj1, obj2)) // true

PureComponent元件修改

import React, { Component } from 'react';
import { is } from "immutable";
class PureComponent extends Component{
  shouldComponentUpdate (nextProps, nextState) {
    // return !_.isEqual(nextState, this.state) 刪除這一行
    // 拿到新老狀態， 在後邊進行比對
    let oldState = this.state || {}
    let newState = nextState ? nextState : {}
    // 如果屬性鍵不同，直接更新頁面
    let keys = Object.keys(newState)
    if (Object.keys(oldState).length !== keys.length) return true;
    for (var i = 0, len = keys.length; i < len; i++) {
      let key = keys[i]
      // 如果說屬性值不一樣，說明需要更新狀態
      if(!is(newState[key], oldState[key])) return true
    }
    return false
  }

}

export default PureComponent

index.js元件修改

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import PureComponent from './PureComponent';
import _ from 'lodash'
let immutable = require('immutable')
let { Map, List, fromJS } = immutable
// PureComponent 元件優化的原理是重寫了shouldComponentUpdate，如果說老的狀態物件昂和新的狀態對戲那個不是一個對戲那個的話才會重新整理頁面
/**
 * 1.每一次都要生成一個新的物件, 深克隆是非常消耗記憶體的
 */
class Counter extends PureComponent{
  state = {
    counter: Map({ number: 0})
  }
  handleClick = event => {
    // 優化的深拷貝，實現了節約記憶體
    // let state = _.cloneDeep(this.state) 刪除此行
    let amount = this.amount.value ? Number(this.amount.value) : 0
    // 新增下邊這個狀態
    let newState = { ...this.state, counter: this.state.counter.update('number', val => val + amount)}

    this.setState(newState)
  }
  render () {
    console.log('render')
    return (
      <div>
        <p>{this.state.counter.get('number')}</p>
        <input ref={input => this.amount = input}/>
        <button onClick={this.handleClick}>add</button>
      </div>
    )
  }
}

ReactDOM.render(<Counter></Counter>, document.getElementById('root'));

總結

通過簡單的處理，就會很大程度的提高效能解決