Immutable在React中的使用

日结博客 8.5.18 HZ

Immutable的运用

• 判断数据是否值相等

import { is } from 'immutable'
let foo = { a: 'name' }
let foo1 = { a: 'name' }
console.log(is(foo, foo1)) // true

• 在React中生命周期中运用

shouldComponentUpdate(nextProps = {}, nextState = {}) {
     const thisProps = this.props || {}, thisState = this.state || {}
     // 如果参数的长度不一致，更新
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }
    // 如果参数的值不一致，更新
    const flag1 = Object.keys(nextProps).some(item => !is(thisProps[item], nextProps[item]))
    if (flag1) return true
    // 如果state值不一致，更新
    const flag2 = Object.keys(nextState).some(item => !is(thisState[item], nextState[item]))
    if(flag2) return true
    
    return false;
}

更多详细的immutable的相关文档可以看这个：https://github.com/camsong/blog/issues/3