不可變資料方案之immer.js原理解析

2023-02-25 06:02:05

前言

本篇文章是JavaScript 函數語言程式設計學習系列第三篇，感興趣也可以先去看看前兩篇內容：

前一篇 JavaScript資料型別對函數語言程式設計的影響講到了不可變資料的重要性，而讓資料不可變的原理就是 “拷貝資料”。

但如果拷貝的是一個樹形結構，層次比較深，看是一個物件，但實際上裡面有上百個物件，比如：

// 某某公司組織架構
const org = {
    name: "某某公司",
    children: [
        { name: "研發部", children: [{ name: "張三" }, { name: "李四" }] },
        { name: "產品部", children: [{ name: "王五" }] }，
        // 省略 10 個部門，每個部門 10 個人
    ]
}

這個 org 資料中的 children 是 Array 型別的物件，children 裡面的部門一個是一個基本物件，然後再往下又是 Array 物件 ...... ，上面結構看起來還很簡單，但實際上寫出來的都有了 9 個物件，如果這個組織有一百個人，至少 100 多個物件，如果為了保持資料不可變，每次修改物件，都要對整個 org 進行拷貝的話，那麼操作個幾十次上百次，很容易造成效能問題，要是原始的資料意外沒有銷燬的話，還容易造成記憶體洩露（這是我曾經剛出來工作一兩年幹過的事情，操作一個增刪改查的列表頁，沒操作幾次，瀏覽器就變卡了，到後面必須得重新重新整理頁面

不可變資料方案之immer.js原理解析

目錄

前言

熱門文章