immer.js不可变数据方案原理如何深入解析和应用？

本文共计511个文字，预计阅读时间需要3分钟。

目录+前言+了解+immer.js+immer.js+原理+总结+前言+本篇章节是JavaScript函数式编程学习系列的第三篇，涉及immer.js库的使用。感兴趣的话，可以先看看前两篇内容：+一文理解JavaScript中的函数式编程概念+JavaScript数据+

目录

• 前言
• 了解 immer.js
• immer.js 原理
• 总结

前言

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

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

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

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

// 某某公司组织架构 const org = { name: "某某公司", children: [ { name: "研发部", children: [{ name: "张三" }, { name: "李四" }] }, { name: "产品部", children: [{ name: "王五" }] }， // 省略 10 个部门，每个部门 10 个人 ] }

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