2019-04-08 immutable.js 构造Map对象

1. 想要把一个JS对象转换成 immutable 的Map对象怎么做呢。

• Map()

Creates a new Immutable Map.
Note: Map is a factory function and not a class, and does not use the new keyword during construction.

Map() 是一个工厂函数，不是一个 class ，创建Map对象的时候不需要使用 new 关键字
Map() 是浅层的转换

• fromJS()

Deeply converts plain JS objects and arrays to Immutable Maps and Lists.

深度的把 js对象 转换成immutable对象

他们的区别如下

      const obj = { key: { x: 1 } };
      const a = new Map(obj);
      const b = fromJS(obj);
      console.log(Map.isMap(a.get('key')); // false
      console.log(Map.isMap(b.get('key')); // true

2. immutable对象转换成js对象

All Immutable.js Collections can be converted to plain JavaScript Arrays and Objects shallowly with toArray() and toObject() or deeply with toJS().

toArray() 和 toObject() 是浅转换， toJS() 是深转换。

const deep = Map({ a: 1, b: 2, c: List([ 3, 4, 5 ]) });
console.log(deep.toObject()); // { a: 1, b: 2, c: List [ 3, 4, 5 ] }
console.log(deep.toArray()); // [ 1, 2, List [ 3, 4, 5 ] ]
console.log(deep.toJS()); // { a: 1, b: 2, c: [ 3, 4, 5 ] }
JSON.stringify(deep); // '{"a":1,"b":2,"c":[3,4,5]}'

React组件状态必须是一个原生JavaScript对象，而不能是一个Immutable对象，因为React的setState方法期望接受一个对象然后使用Object.assign方法将其与之前的状态对象合并

class  Component  extends React.Component {
    Constructor (props)  {
        super(props)

        this.state = {
            data: Immutable.Map({
            count:0,
            todos: List()
            })
        }
    }
}

小技巧

• 不要在Immutable对象中混用原生JavaScript对象；

• 基于上一点，当在Immutable对象内添加JavaScript对象时，先使用fromJS()将JavaScript对象转换成Immutable对象

// 不好
const obj = { key: value }
const newState = state.merge(obj)

// 较好
const obj = { key: value }
const newState = state.merge(fromJS(obj))

• 使用Immutable对象表示完整的Redux状态树；
  对于一个Redux应用，完整的状态树应该由一个Immutable对象表示，而没有原生JavaScript对象。

• 容器组件可以使用react-redux提供的connect方法访问redux的store，所以我们需要保证选择器（selectors）总是返回Immutable对象，否则，将会导致不必要的重新渲染。另外，我们可以使用诸如reselect的第三方库缓存选择器（selectors）以提高部分情景下的性能。