React学习之扩展不变的数据(immutability-helper)优化(三十二)

前端之家收集整理的这篇文章主要介绍了React学习之扩展不变的数据(immutability-helper)优化(三十二)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

注意

插件是一个被遗留的插件,如今好像更新为这个地址:https://github.com/kolodny/immutability-helper

引入

import update from 'react-addons-update'; // ES6
var update = require('react-addons-update'); // ES5 with npm
var 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,3]

嵌套的集合

const collection = [1,{a: [12,17,15]}];
const newCollection = update(collection,{2: {a: {$splice: [[1,1,13,14]]}}});
// => [1,13,14,15]}]

从索引为 2 的地方开始删除 2 个,然后插入 13@H_502_367@,14 .

更新当前值

const obj = {a: 5,b: 3};
const newObj = update(obj,{b: {$apply: function@H_32_404@(x) {return x * 2;}}});
// => {a: 5,b: 6}
// 两个是等价的
const newObj2 = update(obj,{b: {$set: obj.b * 2}});

合并(浅)

const obj = {a: 5,{$merge: {b: 6,c: 7}}); // => {a: 5,b: 6,c: 7}

下一篇将讲React的纯渲染Mixins

猜你在找的React相关文章