初次遇到的坑

在最近的开发中，又遇到了之前的坑，再次体会到了需要使用immutable的重要性。js中数组和对象的传递是引用，在平时拿出来肯定都清楚，但是在实际开发中却常常会忘记这个问题，特别是在数据的结构很深的时候。之前的场景如下：
在redux中定义了一个很深的结构，类似如下：

{
  type: 'String',
  name: 'XX',
  id: 1,
  value: {
    array: ['XX', 'XX', 'XX'],
    id: 2
  }
}

在修改返回的时候只是使用了简单的Object.assign返回一个新的state。
这样在后面组件的传值中便出现了问题。

#data的结构同上，从redux中获取
<ParentComponent>
    <ChildComponent value={data.value.array}/>
</ParentComponent>

由于reducer中的处理只是简单的使用Object.assign，当redux中的array修改后ChildComponent一直得不到重新渲染。
主要的原因是Object.assign并不会的更深的结构进行深拷贝，因此value中array的引用并没有改变，造成子组件无法渲染。

再次遇到的坑

再次遇到坑，原因跟之前是一样的，但是之所以会犯同样的错误是因为对于react中的setState方法理解不够深刻造成的。
react中setState会创建一个新的state对象，过去我一直以为这个新的state对象是一个深拷贝对象，因为类似这样的操作也会触发渲染：

this.setState({ ..this.state })

但实际上，这个新state对象并不是一个深拷贝对象，下面的代码是react源码中生成新的state部分。

_processPendingState: function(props, context) {
  var inst = this._instance;
  # 这个queue保存了每次setState中传入的新state
  var queue = this._pendingStateQueue;
  # 是否需要更新state
  var replace = this._pendingReplaceState;
  this._pendingReplaceState = false;
  this._pendingStateQueue = null;
  # 队列不存在则返回初始state
  if (!queue) {
    return inst.state;
  }
  if (replace && queue.length === 1) {
    return queue[0];
  }
  # 队列存在则更state，这里可以看到使用的是Object.assign方法
  var nextState = Object.assign({}, replace ? queue[0] : inst.state);
  # 合并多个setState方法
  for (var i = replace ? 1 : 0; i < queue.length; i++) {
    var partial = queue[i];
    Object.assign(
      nextState,
      typeof partial === 'function' ?
      partial.call(inst, nextState, props, context) :
      partial
    );
  }
return nextState;
},

所以问题的本质还是Object.assign并不会深拷贝对象里的复杂结构体。造成在如下场景下的调用会失效。
原始结构如下，并在初始化的时候放入state中this.state.data：

{
  text: 'test',
  data: {
    name: '1',
    value: [1,2,3]
  }
}

在后期的的调用，如下并不会触发一些组件的渲染

# setState调用
const data = this.state.data;
data.data.value[0] = 2;
this.setState({ data })
# 组件调用
<Test  data={this.state.data.data.value}/>

总结

React应用中，使用redux来管理state，使用immutable.js来生成state