不可變數據方案之immer.js原理解析

目錄

• 前言
• 了解 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 進行拷貝的話，那么操作個幾十次上百次，很容易造成性能問題，要是原始的數據意外沒有銷毀的話，還容易造成內存泄露（這是我曾經剛出來工作一兩年干過的事情，操作一個增刪改查的列表頁，沒操作幾次，瀏覽器就變卡了，到后面必須得重新刷新頁面