目錄

• 前言
• 了解 immer.js
• immer.js 原理
• 總結(jié)

前言

本篇文章是JavaScript 函數(shù)式編程 學(xué)習(xí)系列第三篇，感興趣也可以先去看看前兩篇內(nèi)容：

• 一文理解JavaScript中的函數(shù)式編程的概念
• JavaScript數(shù)據(jù)類型對(duì)函數(shù)式編程的影響

前一篇 JavaScript數(shù)據(jù)類型對(duì)函數(shù)式編程的影響 講到了不可變數(shù)據(jù)的重要性，而讓數(shù)據(jù)不可變的原理就是 “拷貝數(shù)據(jù)”。

但如果拷貝的是一個(gè)樹形結(jié)構(gòu)，層次比較深，看是一個(gè)對(duì)象，但實(shí)際上里面有上百個(gè)對(duì)象，比如：

// 某某公司組織架構(gòu)
const org = {
    name: "某某公司",
    children: [
{ name: "研發(fā)部", children: [{ name: "張三" }, { name: "李四" }] },
{ name: "產(chǎn)品部", children: [{ name: "王五" }] }，
// 省略 10 個(gè)部門，每個(gè)部門 10 個(gè)人
    ]
}

這個(gè) org 數(shù)據(jù)中的 children 是 Array 類型的對(duì)象，children 里面的部門一個(gè)是一個(gè)基本對(duì)象，然后再往下又是 Array 對(duì)象 ...... ，上面結(jié)構(gòu)看起來(lái)還很簡(jiǎn)單，但實(shí)際上寫出來(lái)的都有了 9 個(gè)對(duì)象，如果這個(gè)組織有一百個(gè)人，至少 100 多個(gè)對(duì)象，如果為了保持?jǐn)?shù)據(jù)不可變，每次修改對(duì)象，都要對(duì)整個(gè) org 進(jìn)行拷貝的話，那么操作個(gè)幾十次上百次，很容易造成性能問(wèn)題，要是原始的數(shù)據(jù)意外沒有銷毀的話，還容易造成內(nèi)存泄露（這是我曾經(jīng)剛出來(lái)工作一兩年干過(guò)的事情，操作一個(gè)增刪改查的列表頁(yè)，沒操作幾次，瀏覽器就變卡了，到后面必須得重新刷新頁(yè)面