网站建设中页面设计,国内开源代码网站,肥乡专业做网站,企业为啥要做网站引子
看一段大家熟悉的代码
const state {str: wwming,obj: {y: 1},arr: [1, 2, 3]
}
const newState stateconsole.log(newState state) // truenewState和state是相等的
原因#xff1a; 由于js的对象和数组都是引用类型。所以newState的state实际上是指向于同一块内存…引子
看一段大家熟悉的代码
const state {str: wwming,obj: {y: 1},arr: [1, 2, 3]
}
const newState stateconsole.log(newState state) // truenewState和state是相等的
原因 由于js的对象和数组都是引用类型。所以newState的state实际上是指向于同一块内存地址的, 所以结果是newState和state是相等的。
尝试修改一下数据
const state {str: wwming,obj: {y: 1},arr: [1, 2, 3]
}
const newState statenewState.str wwming is coolconsole.log(state.str, newState.str) // wwming is cool wwming is cool可以看到newState的修改也会引起state的修改。
如何解决
js中提供了另一种修改数据的方式要修改一个数据之前先制作一份数据的拷贝像这样
const state {str: wwming,obj: {y: 1},arr: [1, 2, 3]
}
const newState Object.assign({}, state)newState.str wwming is coolconsole.log(state.str, newState.str)可以使用很多方式在js中复制数据比如:
Object.assign,Object.freeze,slice,concat,map,filter,reduce
等方式进行复制但这些都是浅拷贝就是只拷贝第一层数据。
更深层的数据还是同一个引用比如
const state {str: wwming,obj: {y: 1},arr: [1, 2, 3]
}
const newState Object.assign({}, state)newState.obj.y 2
newState.arr.push(4)
console.log(state, newState) // 执行结果{str: wwming,obj: {y: 2},arr: [1,2,3,4]
}{str: wwming,obj: {y: 2},arr: [1,2,3,4]
}可以看到当在更改newState更深层次的数据的时候还是会影响到state的值。
如果要深层复制就得一层一层的做 递归拷贝这是一个复杂的问题。
虽然有些第三方的库已经帮我们做好了比如lodash的cloneDeep方法。深拷贝是非常消耗性能的。
import { cloneDeep } from lodashconst state {str: wwming,obj: {y: 1},arr: [1, 2, 3]
}
const newState cloneDeep(state)newState.obj.y 2
newState.arr.push(4)console.log(state, newState) 解决这个问题就引出了 不可变数据(Immutable Data)
什么是不可变数据 (Immutable Data)
Immutable data encourages pure functions (data-in, data-out) and lends itself to much simpler application development and enabling techniques from functional programming such as lazy evaluation.
– 官方文档对其描述
Immutable Data 就是 一旦创建就不能再被更改的数据。
对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。
Immutable 实现的原理是 Persistent Data Structure持久化数据结构也就是使用旧数据创建新数据时要保证旧数据同时可用且不变。
同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗Immutable 使用了Structural Sharing结构共享即如果对象树中一个节点发生变化只修改这个节点和受它影响的父节点其它节点则进行共享。
更多精彩内容请微信搜索“前端爱好者“ 戳我 查看 。
immutable.js的优缺点
优点
降低mutable带来的复杂度节省内存历史追溯性时间旅行时间旅行指的是每时每刻的值都被保留了想回退到哪一步只要简单的将数据取出就行想一下如果现在页面有个撤销的操作撤销前的数据被保留了只需要取出就行这个特性在redux或者flux中特别有用拥抱函数式编程immutable本来就是函数式编程的概念纯函数式编程的特点就是只要输入一致输出必然一致相比于面向对象这样开发组件和调试更方便。推荐一本函数式编程的在线免费书《JS 函数式编程指南》, 此书可以推荐给学生做为课外补充阅读。
缺点
需要重新学习api资源包大小增加源码5000行左右容易与原生对象混淆由于api与原生不同混用的话容易出错。
----------------------- 优点 -------------------
降低mutable带来的复杂度
共享的可变状态是万恶之源举个简单的例子就是js中的引用赋值
var obj { a: 1 };
var copy_obj obj;
copy_obj.a 2;
console.log(obj.a); // 2引用赋值虽然可以节省内存但当应用复杂之后可变状态往往会变成噩梦.
通常一般的做法是使用shallowCopy或者deepCopy来避免被修改但这样造成了CPU和内存的消耗.
Immulate可以很好地解决这些问题。
节省内存空间
上面提到了结构共享Immutable.js 使用这种方式会尽量复用内存甚至以前使用的对象也可以再次被复用。
没有被引用的对象会被垃圾回收。
import { Map } from immutable;let a Map({select: users,filter: Map({ name: Cam })
})let b a.set(select, people);a b; // false
a.get(filter) b.get(filter); // true上面 a 和 b 共享了没有变化的 filter 节点。
Undo/RedoCopy/Paste随意穿越
因为每次数据都是不一样的只要把这些数据放到一个数组里储存起来想回退到哪里就拿出对应数据即可很容易开发出撤销重做这种功能。
拥抱函数式编程
Immutable持久化数据结构本身就是函数式编程中的概念。
函数式编程关心数据的映射命令式编程关心解决问题的步骤纯函数式编程比面向对象更适用于前端开发。
因为只要输入一致输出必然一致这样开发的组件更易于调试和组装。
----------------------- 缺点 -------------------
需要重新学习api
资源包大小增加源码5000行左右
容易与原生对象混淆由于api与原生不同混用的话容易出错
主要是Immutable的API设计的和原生对象类似容易混淆操作。
例如其中Map和List的操作
// Immutable
const map Map({ a: 1, b: 2 });
const list List([1,2,3]);// 原生js
const obj { a: 1, b: 2 };
const arry [1,2,3];// 取值方式对比
console.log(map.get(a));
console.log(list.get(0));console.log(obj.a);
console.log(arry[0]);参考文档
https://blog.csdn.net/weixin_44216510/article/details/118073411https://zhuanlan.zhihu.com/p/101534155
