服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 不可变数据方案之immer.js原理解析

不可变数据方案之immer.js原理解析

2023-06-12 16:30Hutao js教程

这篇文章主要为大家介绍了不可变数据方案之immer.js原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前言

本篇文章是JavaScript 函数式编程 学习系列第三篇,感兴趣也可以先去看看前两篇内容:

  • 一文理解JavaScript中的函数式编程的概念
  • JavaScript数据类型对函数式编程的影响

前一篇 JavaScript数据类型对函数式编程的影响 讲到了不可变数据的重要性,而让数据不可变的原理就是 “拷贝数据”。

但如果拷贝的是一个树形结构,层次比较深,看是一个对象,但实际上里面有上百个对象,比如:

?
1
2
3
4
5
6
7
8
9
// 某某公司组织架构
const org = {
    name: "某某公司",
    children: [
        { name: "研发部", children: [{ name: "张三" }, { name: "李四" }] },
        { name: "产品部", children: [{ name: "王五" }] },
        // 省略 10 个部门,每个部门 10 个人
    ]
}

这个 org 数据中的 children 是 Array 类型的对象,children 里面的部门一个是一个基本对象,然后再往下又是 Array 对象 ...... ,上面结构看起来还很简单,但实际上写出来的都有了 9 个对象,如果这个组织有一百个人,至少 100 多个对象,如果为了保持数据不可变,每次修改对象,都要对整个 org 进行拷贝的话,那么操作个几十次上百次,很容易造成性能问题,要是原始的数据意外没有销毁的话,还容易造成内存泄露(这是我曾经刚出来工作一两年干过的事情,操作一个增删改查的列表页,没操作几次,浏览器就变卡了,到后面必须得重新刷新页面

延伸 · 阅读

精彩推荐