不可變數(shù)據(jù)方案之immer.js原理解析

更新時(shí)間：2023年02月23日 09:17:32 作者：Hutao

這篇文章主要為大家介紹了不可變數(shù)據(jù)方案之immer.js原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

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

前一篇 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è)面???）。

因此，當(dāng)數(shù)據(jù)規(guī)模大、數(shù)據(jù)拷貝行為頻繁時(shí)，拷貝將會(huì)給我們的應(yīng)用性能帶來(lái)巨大的挑戰(zhàn)。

于是社區(qū)出現(xiàn)了很多來(lái)讓可變數(shù)據(jù)不可變的方案，核心目的都是為了從最小單元去進(jìn)行拷貝，沒改變的對(duì)象數(shù)據(jù)則進(jìn)行復(fù)用，而其中最具有代表性和影響力的就是 immutable.js 和 immer.js 。

immutable.js 底層是持久化數(shù)據(jù)結(jié)構(gòu)，內(nèi)部實(shí)現(xiàn)比較復(fù)雜，后續(xù)有機(jī)會(huì)會(huì)專門寫一篇 immutable.js 的原理相關(guān)的文章。

相比而言，immer.js 的底層是 Proxy 代理模式，這種方式的實(shí)現(xiàn)過(guò)程比 immutable.js 會(huì)簡(jiǎn)單不少。

了解 immer.js

immer.js 最重要最核心的就是 produce 函數(shù)，也是默認(rèn)導(dǎo)出函數(shù)，其他的導(dǎo)出其實(shí)都算是一些輔助性工具函數(shù)。

下面我們來(lái)看一下 produce 的使用示例，驗(yàn)證它是不是實(shí)現(xiàn)了從最小單元去進(jìn)行拷貝，沒改變的對(duì)象數(shù)據(jù)則進(jìn)行復(fù)用這個(gè)目的。

import produce from "immer"
const state = [
    { label: "HTML", info: { desc: "超文本標(biāo)記語(yǔ)言" } },
    { label: "CSS", info: { desc: "層疊樣式表" } }
];
const state1 = produce(state, draft => { 
    // 新增了一個(gè)對(duì)象
    draft.push({ label: "ES5", info: { desc: "基于原型和頭等函數(shù)的多范式高級(jí)解釋型編程語(yǔ)言" } });
    // 修改了了一個(gè)對(duì)象
    draft[1].label = "CSS3";
})
console.log(state === state1) // false
console.log(state.length === state1.length) // false
console.log(state[0] === state1[0]) // true
console.log(state[1] === state1[1]) // false
console.log(state[1].info === state1[1].info) // true

可以看出來(lái)，每個(gè)最小單元的對(duì)象，如果進(jìn)行了修改，則會(huì)拷貝對(duì)象，如果沒有進(jìn)行修改的對(duì)象，則會(huì)進(jìn)行復(fù)用。

我們把它畫成一個(gè)圖：

draft 新增了字對(duì)象，因此改變了 draft 自身。
draft[1] 修改了 label，改變了自身draft[1]，但實(shí)際上會(huì)一層層傳遞上去，也相當(dāng)于修改了 draft

因此，只要對(duì)子節(jié)點(diǎn)的任何操作，實(shí)際上都會(huì)拷貝當(dāng)前對(duì)象，當(dāng)前對(duì)象被拷貝，就會(huì)影響上一層的對(duì)象也會(huì)被拷貝，層層遞進(jìn)，最后拷貝到了根結(jié)點(diǎn)，但是都是淺拷貝，因此子節(jié)點(diǎn)沒有變的對(duì)象都可以復(fù)用。

比如我再修改一下：

const state2 = produce(state1, draft =&gt; {
    draft[2].label = "ES";
})

這時(shí)候的情況就是這樣：

immer.js 原理

immer.js 是基于 Proxy 來(lái)監(jiān)聽對(duì)象的 get 和 set 操作，然后對(duì)數(shù)據(jù)進(jìn)行處理和判斷是否返回新的對(duì)象。

我們來(lái)使用 Proxy 來(lái)進(jìn)行模擬 produce 函數(shù)。

function produce<D extends object>(base: D, recipe: (draft: D) => void) {
  // 用于存儲(chǔ)改變后的新數(shù)據(jù)
  let newData: any;
  // 給 base 對(duì)象添加代理
  const proxy = new Proxy(base, {
    set(obj, key: string, value: any) {
      // 檢查 newData 是否存在，如果不存在，創(chuàng)建 newData
      if (!newData) {
        // 淺拷貝對(duì)象
        newData = { ...obj }
      }
      // 修改 newData，而不是 base，永遠(yuǎn)不要修改 base
      newData[key] = value
      return true
    }
})
  // 將 對(duì)象的代理 作為入?yún)魅?recipe，讓外界修改的是代理，而不是原本的對(duì)象數(shù)據(jù)
  recipe(proxy)
  // 為了避免意外的修改發(fā)生，返回一個(gè)被“凍結(jié)”的對(duì)象，保證數(shù)據(jù)的純度
  // 如果 newData 不存在，表示沒有執(zhí)行寫操作，返回 base 即可
  return Object.freeze(newData as D || base)
}

然后我們來(lái)測(cè)試一下：

const state = { label: "HTML", info: { desc: "超文本標(biāo)記語(yǔ)言" } };
const state1 = produce(state, (draft) => {
    draft.label = "H5";
})
console.log(state === state1) // false
console.log(state.info === state1.info) // true

可以看出實(shí)現(xiàn)的這個(gè)極簡(jiǎn)版的 produce 已經(jīng)可以實(shí)現(xiàn) 從最小單元去進(jìn)行拷貝，沒改變的對(duì)象數(shù)據(jù)則進(jìn)行復(fù)用，但僅限于修改對(duì)象的第一層結(jié)構(gòu)，如果直接修改 draft.info.desc 會(huì)發(fā)現(xiàn) state 和 state1 都會(huì)被改變。

Proxy 只會(huì)對(duì)當(dāng)前傳入進(jìn)去的一個(gè)對(duì)象單元進(jìn)行代理，如果有子對(duì)象，并不會(huì)進(jìn)行代理，因此，深層次對(duì)象還需要再加處理，就像深拷貝一樣，需要進(jìn)行遞歸處理。

immer.js 源碼的代碼并不少，主要是為了兼容性、處理各種數(shù)據(jù)類型、以及擴(kuò)展API，因此做了很多處理，這個(gè)后續(xù)會(huì)單獨(dú)出一篇分析它內(nèi)部源碼的實(shí)現(xiàn)，這里先說(shuō)一下其內(nèi)部主要方案：

默認(rèn)導(dǎo)出的 produce 本身是一個(gè) Immer 類的一個(gè)屬性方法，也導(dǎo)出了 Immer 類。
兼容了 Map、Set 數(shù)據(jù)結(jié)構(gòu)，Proxy 本身支持了數(shù)組類型。
需要兼容ES5時(shí)，使用 Object.defineProperty 來(lái)進(jìn)行兼容。
擴(kuò)展了不少 API ，主要是為了增強(qiáng)各種功能和使用體驗(yàn)。
內(nèi)部核心實(shí)現(xiàn)方法是 createProxy ，其內(nèi)部通過(guò) get 攔截屬性獲取方法來(lái)實(shí)現(xiàn)動(dòng)態(tài)給子對(duì)象 Proxy 化，也就是只有用到的屬性才會(huì)變成 Proxy Object ，沒有用到的并不會(huì)變。
內(nèi)部基本上把 Proxy 的 handler 中的屬性都使用到了。