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

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

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

前言

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

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

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

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

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

因此，當數據規(guī)模大、數據拷貝行為頻繁時，拷貝將會給我們的應用性能帶來巨大的挑戰(zhàn)。

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

immutable.js 底層是持久化數據結構，內部實現比較復雜，后續(xù)有機會會專門寫一篇 immutable.js 的原理相關的文章。

相比而言，immer.js 的底層是 Proxy 代理模式，這種方式的實現過程比 immutable.js 會簡單不少。

了解 immer.js

immer.js 最重要最核心的就是 produce 函數，也是默認導出函數，其他的導出其實都算是一些輔助性工具函數。

下面我們來看一下 produce 的使用示例，驗證它是不是實現了從最小單元去進行拷貝，沒改變的對象數據則進行復用這個目的。

import produce from "immer"
const state = [
    { label: "HTML", info: { desc: "超文本標記語言" } },
    { label: "CSS", info: { desc: "層疊樣式表" } }
];
const state1 = produce(state, draft => { 
    // 新增了一個對象
    draft.push({ label: "ES5", info: { desc: "基于原型和頭等函數的多范式高級解釋型編程語言" } });
    // 修改了了一個對象
    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

可以看出來，每個最小單元的對象，如果進行了修改，則會拷貝對象，如果沒有進行修改的對象，則會進行復用。

我們把它畫成一個圖：

draft 新增了字對象，因此改變了 draft 自身。
draft[1] 修改了 label，改變了自身draft[1]，但實際上會一層層傳遞上去，也相當于修改了 draft

因此，只要對子節(jié)點的任何操作，實際上都會拷貝當前對象，當前對象被拷貝，就會影響上一層的對象也會被拷貝，層層遞進，最后拷貝到了根結點，但是都是淺拷貝，因此子節(jié)點沒有變的對象都可以復用。

比如我再修改一下：

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

這時候的情況就是這樣：

immer.js 原理

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

我們來使用 Proxy 來進行模擬 produce 函數。

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

然后我們來測試一下：

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

可以看出實現的這個極簡版的 produce 已經可以實現從最小單元去進行拷貝，沒改變的對象數據則進行復用，但僅限于修改對象的第一層結構，如果直接修改 draft.info.desc 會發(fā)現 state 和 state1 都會被改變。

Proxy 只會對當前傳入進去的一個對象單元進行代理，如果有子對象，并不會進行代理，因此，深層次對象還需要再加處理，就像深拷貝一樣，需要進行遞歸處理。

immer.js 源碼的代碼并不少，主要是為了兼容性、處理各種數據類型、以及擴展API，因此做了很多處理，這個后續(xù)會單獨出一篇分析它內部源碼的實現，這里先說一下其內部主要方案：

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