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抽离出来的独立包