介绍

更多信息

immutable中文：不变的，不可改变的

每次修改一个Immutable对象时都会创建一个新的不可变的对象，在新对象上操作并不会影响到原对象的数据。

安装

npm i immutable

一、Immutable优化性能的方式

Immutable实现的原理是持久化数据结构，也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免deepCopy把所有节点都复制一遍带来的性能损耗，Immutable使用了结构共享，即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其他节点则进行共享。

二、Immutable中Map用法

const { Map } = require("immutable")
let obj1 = {name: "rain",age: 18,arr: [1, 2, 3]
}
let obj2 = Map(obj1)
let obj3 = obj2.set("name", "snow").set("age", 20)
console.log(obj2.toJS())// { name: 'rain', age: 18, arr: [ 1, 2, 3 ] }
console.log(obj3.toJS())// { name: 'snow', age: 20, arr: [ 1, 2, 3 ] }

三、Immutable中List用法

List中的方法和JS中数组的方法大部分一样，List方法每次操作都返回一个新的数组，新数组不影响老数组。

const { List } = require("immutable")
let arr = [1, 2, 3, 4]
let arr1 = List(arr)
let arr2 = arr1.push(5)
let arr3 = arr1.pop()
console.log(arr1.toJS())// [ 1, 2, 3, 4 ]
console.log(arr2.toJS())// [ 1, 2, 3, 4, 5 ]
console.log(arr3.toJS())// [ 1, 2, 3 ]

四、`fromJS()`和`setIn()`方法

 let obj1 = fromJS({name: "rain",arr: [1, 2, 3, 4, 5],dog: {name: "dog",age: 16}})// 两者等价，可见fromJS()方法更方便let obj1 = Map({name: "rain",arr: List([1, 2, 3, 4, 5]),dog: Map({name: "dog",age: 16})})let obj2 = obj1.set("name", "snow").setIn(["dog", "name"], "cat").setIn(["arr", 0], 10)// 修改dog元素的name属性，修改数组arr[0]console.log(obj2.get("name"), obj2.get("dog").get("name"), obj2.get("arr").get(0)) // snow cat 10

五、`updateIn()`方法

    let obj2 = obj1.updateIn(["arr"], (list) => list.splice(0, 1)) // 删除arr[0]console.log(obj2.get("arr").toJS()) // [2, 3, 4, 5]

JS immutable组件相关推荐

Java 接受reactjs数据_[Java教程]react.js 父子组件数据绑定实时通讯
[Java教程]react.js 父子组件数据绑定实时通讯 0 2017-09-23 17:00:14 import React,{Component} from 'react'import Reac ...
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 参考文章: (1)js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable ...
Vue.js 定义组件模板的七种方式
转载自 Vue.js 定义组件模板的七种方式在 Vue 中定义一个组件模板,至少有七种不同的方式(或许还有其它我不知道的方式): 字符串模板字面量 x-template 内联模板 render ...
angular移除事件绑定事件绑定_Vue.js子组件利用事件向父组件传输数据，以及sync修饰符和双向绑定...
在Vue.js的组件中,prop是"单向绑定"的,数据只能从父组件传输到子组件.Vue文档中的说了这样做的原因: 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑 ...
debounce实现 js_Vue.js以组件或者插件的形式实现throttle或者debounce
Vue.js以组件或者插件的形式实现throttle或者debounce 发布于 2020-3-9| 复制链接摘记: 需求在业务中,会碰到许多点击请求的情况,在请求前改变一个lock变量(在lock ...
Java调用新浪微博API 接口发微博（包含js微博组件、springMVC新浪登录）详解
参考自:http://www.myexception.cn/program/1930025.html https://blog.csdn.net/qq_36580777/article/details ...
360奇舞团钟恒：选用Vue.js进行组件化开发，我们遇到了哪些坑？
责编:陈秋歌,关注前端开发领域,寻求报道或者投稿请发邮件chenqg#csdn.net. 欢迎加入"CSDN前端开发者"微信群,参与热点.难点技术交流.请加群主微信「Rachel_ ...
从零开始编写一个微信小程序（微信开发者工具+JS+WuxUI组件库+云开发）万字整理，建议收藏！
微信小程序-魔镜笔记&源码(微信开发者工具+JS+UI组件库+云开发) 效果展示视频演示经历了一次升级之后,我的小程序怎么样了? 文章目录微信小程序-魔镜笔记&源码(微信开发 ...
Chart.js与ECharts.js图表组件对比与使用
Chart.js与ECharts.js图表组件对比与使用常用的图表组件 Chart.js与ECharts.js的简要介绍与使用. Chart.js Chart.js官方网址.里面包括文档.例子和G ...

JS immutable组件

介绍

安装

一、Immutable优化性能的方式

二、Immutable中Map用法

三、Immutable中List用法

四、`fromJS()`和`setIn()`方法

五、`updateIn()`方法

JS immutable组件相关推荐

最新文章

热门文章

JS immutable组件

介绍

安装

一、Immutable优化性能的方式

二、Immutable中Map用法

三、Immutable中List用法

四、fromJS()和setIn()方法

五、updateIn()方法

JS immutable组件相关推荐

最新文章

热门文章

四、`fromJS()`和`setIn()`方法

五、`updateIn()`方法