不修改原对象,返回新的对象方法总结

react 的state 和redux修改都需要返回新的对象,简单的数组可用数组的方法map,filter,等处理.

例如:

this.setState({
	array:array.map(item=>item+1)
})

但稍复杂一些的数据处理起来比较吃力。数据的深拷贝可以通过一些其它的方式巧妙处理

let obj = {a:{b:2}}
let obj2 = JSON.parse(JSON.stringify(obj));
obj == obj2  //false

react 早期还提供了一个update方法,来返回新的对象处理不可变数据,(已经不集成在react中)

import update from 'react-addons-update';

myData.x.y.z = 7;

const newData = update(myData, {
  x: {y: {z: {$set: 7}}}
});

已从react中提取出新的包 :immutability-helper

提供的方法有:

  • {$push: array}array 里的所有数据 push 到目标数组里
  • {$unshift: array}array 里的所有数据从目标数组里 unshift
  • {$splice: array of arrays} for each item in arrays call splice() 数组里的每一个元素会顺序执行splice方法 *Note: 由于是顺序执行的,所以目标在数组中的索引可能会产生变化
  • {$set: any} 重新赋值
  • {$toggle: array of strings} toggles a list of boolean fields from the target object.(这个没太懂)
  • {$unset: array of strings} 和delete类似,从object中移除key
  • {$merge: object} 类似Object.assign,合并对象
  • {$apply: function} passes in the current value to the function and updates it with the new returned value.(应用方法)

参考文献:

MDN: Object.assign Object.assign 对象的复制与深拷贝问题

react文档:Immutability Helpers react原来的update

immutability-helper:immutability-helper 从react抽离出来的独立包