React学习之扩展不变的数据(immutability-helper)优化(三十二)
来源:互联网 发布:19级野人升级数据 编辑:程序博客网 时间:2024/05/05 14:50
注意
此插件是一个被遗留的插件,如今好像更新为这个地址:https://github.com/kolodny/immutability-helper
引入
import update from 'react-addons-update'; // ES6var update = require('react-addons-update'); // ES5 with npmvar update = React.addons.update; // ES5 with react-with-addons.js
1.概要
React
让我们可以做任何我们想要的数据管理方式,然而,如果你在你的应用中使用了不变的数据,然后实现一个shouldComponentUpdate
方法就会大大的提升你的应用的反应速度。
javascript
比其他语言更难处理不可变的数据,但是React
提供了一个不错的工具update()
,可以非常方便的处理这种不可变数据。
2.主要方式
如果你改变数据方式如下:
myData.x.y.z = 7;// or...myData.a.b.push(9);
当更改了对象的属性,我们根本没有方法去判断发生了改变了,因为本身已经发生了改变,所以,你可能需要创建一个新副本然后改变应该改变的地方,这样shouldComponentUpdate()
就能检测出发生了变化。
const newData = deepCopy(myData);newData.x.y.z = 7;newData.a.b.push(9);
但是,深复制的代价是昂贵的,有时候深复制都是不可能的,当然你可以降低这种代价,只是复制已经改变了的,如果没有改变的,就重复使用它们,然后我们的代码就可能变为如下:
const newData = extend(myData, { x: extend(myData.x, { y: extend(myData.x.y, {z: 7}), }), a: extend(myData.a, {b: myData.a.b.concat(9)})});
然而上述的代码性能依旧是非常差的,主要是这样写代码会非常尴尬,而且BUG
极多。
update()
update()提供简单的语法糖去更好的编写代码。
import update from 'react-addons-update';const newData = update(myData, { x: {y: {z: {$set: 7}}}, a: {b: {$push: [9]}}});
这个语法可能需要适应一下(尽管它是来自于MongoDB
中的),没有什么冗余,又不是什么多变的版本,稳定性好。
$
-前缀是命令的使用前提,需要变化的数据称之为target.
合法命令
{$push: array} 数组中的push()语法 {$unshift: array} 数组中的unshift()语法 {$splice: array of arrays} 类似于splice()的语法{$set: any} 直接赋值覆盖{$merge: object} 合并对象属性{$apply: function} 函数的结果覆盖
例子
简单的
push
const initialArray = [1, 2, 3];const newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]
initialArray
仍然是[1, 2, 3]
嵌套的集合
const collection = [1, 2, {a: [12, 17, 15]}];const newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}});// => [1, 2, {a: [12, 13, 14, 15]}]
从索引为
更新当前值
const obj = {a: 5, b: 3};const newObj = update(obj, {b: {$apply: function(x) {return x * 2;}}});// => {a: 5, b: 6}// 两个是等价的const newObj2 = update(obj, {b: {$set: obj.b * 2}});
合并(浅)
const obj = {a: 5, b: 3};const newObj = update(obj, {$merge: {b: 6, c: 7}}); // => {a: 5, b: 6, c: 7}
下一篇将讲
React
的纯渲染Mixins
1 0
- React学习之扩展不变的数据(immutability-helper)优化(三十二)
- React学习之扩展动画(三十)
- React学习之扩展PureRenderMixin(三十三)
- React学习之扩展键片段(三十一)
- React学习之扩展浅比较(三十四)
- React学习之扩展LinkedStateMixin双向绑定(三十五)
- Android的SeekBar和RateBar的使用-android学习之旅(三十二)
- Hibernate的学习之路三十二(HQL的聚合函数查询)
- JAVA学习笔记(三十二)
- React全家同学习之ES6之字符串的扩展
- React学习之进阶性能优化(十五)
- 大数据学习笔记之三十二 Storm流计算系统的关键特性
- Python的学习(三十二)---- ctypes库的使用整理
- 我的openwrt学习笔记(三十二):openwrt 的UCI
- JSP设计模式基础:View Helper模式——学习如何使用View Helper模式使得Model数据适应表现层的需要(1)
- JSP设计模式基础:View Helper模式——学习如何使用View Helper模式使得Model数据适应表现层的需要(2)
- JSP设计模式基础:View Helper模式——学习如何使用View Helper模式使得Model数据适应表现层的需要(3)
- JSP设计模式基础:View Helper模式——学习如何使用View Helper模式使得Model数据适应表现层的需要(3)
- 编写九九乘法表
- 【BestCoder Round #93】HDU6019 MG loves gold
- 写在大学之后
- Linux kernel 系列 汇编
- Webmix
- React学习之扩展不变的数据(immutability-helper)优化(三十二)
- iOS——UISlider
- 正则表达式--RegExp
- Linux内核调试的方式以及工具集锦
- linux开机只能进入emergency mode的问题
- 在 AngularJS 应用中处理单选框和复选框
- LINUX文件结构
- 今日头条笔试题 数列
- 用Notepad++作为keil的外部编辑器