ES6 Proxy 在 Immer 中的妙用

写在前面

Immer结合 Copy-on-write 机制与 ES6 Proxy 特性，提供了一种异常简洁的不可变数据操作方式：

const myStructure = {
  a: [1, 2, 3],
  b: 0
};
const copy = produce(myStructure, () => {
  // nothings to do
});
const modified = produce(myStructure, myStructure => {
  myStructure.a.push(4);
  myStructure.b++;
});

copy === myStructure  // true
modified !== myStructure  // true
JSON.stringify(modified) === JSON.stringify({ a: [1, 2, 3, 4], b: 1 })  // true
JSON.stringify(myStructure) === JSON.stringify({ a: [1, 2, 3], b: 0 })  // true

这究竟是怎么做到的呢？

一.目标

Immer 只有一个核心 API：

produce(currentState, producer: (draftState) => void): nextState

所以，只要手动实现一个等价的produce函数，就能弄清楚 Immer 的秘密了

二.思路

仔细观察produce的用法，不难发现 5 个特点（见注释）：

const myStructure = {
  a: [1, 2, 3],
  b: 0
};
const copy = produce(myStructure, () => {});
const modified = produce(myStructure, myStructure => {
  // 1.在producer函数中访问draftState，就像访问原值currentState一样
  myStructure.a.push(4);
  myStructure.b++;
});

// 2.producer中不修改draftState的话，引用不变，都指向原值
copy === myStructure  // true
// 3.改过draftState的话，引用发生变化，produce()返回新值
modified !== myStructure  // true
// 4.producer函数中对draftState的操作都会应用到新值上
JSON.stringify(modified) === JSON.stringify({ a: [1, 2, 3, 4], b: 1 })  // true
// 5.producer函数中对draftState的操作不影响原值
JSON.stringify(myStructure) === JSON.stringify({ a: [1, 2, 3], b: 0 })  // true

即：

• 仅在写时拷贝（见注释 2、注释 3）
• 读操作被代理到了原值上（见注释 1）
• 写操作被代理到了拷贝值上（见注释 4、注释 5）

那么，简单的骨架已经浮出水面了：

function produce(currentState, producer) {
  const copy = null;
  const draftState = new Proxy(currentState, {
    get(target, key, receiver) {
      // todo 把读操作代理到原值上
    },
    set() {
      if (!mutated) {
        mutated = true;
        // todo 创建拷贝值
      }
      // todo 把写操作代理到拷贝值上
    }
  });
  producer(draftState);
  return copy || currentState;
}

此外，由于 Proxy 只能监听到当前层的属性访问，所以代理关系也要按需创建：

根节点预先创建一个 Proxy，对象树上被访问到的所有中间节点（或新增子树的根节点）都要创建对应的 Proxy

而每个 Proxy 都只在监听到写操作（直接赋值、原生数据操作 API 等）时才创建拷贝值（所谓Copy-on-write），并将之后的写操作全都代理到拷贝值上

最后，将这些拷贝值与原值整合起来，得到数据操作结果

因此，Immer = Copy-on-write + Proxy

三.具体实现

按照上面的分析，实现上主要分为 3 部分：

• 代理：按需创建、代理读写操作
• 拷贝：按需拷贝（Copy-on-write）
• 整合：建立拷贝值与原值的关联、深度 merge 原值与拷贝值

代理

拿到原值之后，先给根节点创建 Proxy，得到供producer操作的draftState：

function produce(original, producer) {
  const draft = proxy(original);
  //...
}

最关键的当然是对原值的get、set操作的代理：

function proxy(original, onWrite) {
  // 存放代理关系及拷贝值
  let draftState = {
    originalValue: original,
    draftValue: Array.isArray(original) ? [] : Object.create(Object.getPrototypeOf(original)),
    mutated: false,
    onWrite
  };

  // 创建根节点代理
  const draft = new Proxy(original, {
    // 读操作（代理属性访问）
    get(target, key, receiver) {
      if (typeof original[key] === 'object' && original[key] !== null) {
        // 不为基本值类型的现有属性，创建下一层代理
        return proxyProp(original[key], key, draftState, onWrite);
      }
      else {
        // 改过直接从draft取最新状态
        if (draftState.mutated) {
          return draftValue[key];
        }

        // 不存在的，或者值为基本值的现有属性，代理到原值
        return Reflect.get(target, key, receiver);
      }
    },

    // 写操作（代理数据修改）
    set(target, key, value) {
      // 如果新值不为基本值类型，创建下一层代理
      if (typeof value === 'object') {
        proxyProp(value, key, draftState, onWrite);
      }
      // 第一次写时复制
      copyOnWrite(draftState);
      // 复制过了，直接写
      draftValue[key] = value;
      return true;
    }
  });

  return draft;
}

P.S.此外，其余许多读写方法也需要代理，例如has、ownKeys、deleteProperty等等，处理方式类似，这里不再赘述

拷贝

即上面出现过的copyOnWrite函数：

function copyOnWrite(draftState) {
  const { originalValue, draftValue, mutated, onWrite } = draftState;
  if (!mutated) {
    draftState.mutated = true;
    // 下一层有修改时才往父级 draftValue 上挂
    if (onWrite) {
      onWrite(draftValue);
    }
    // 第一次写时复制
    copyProps(draftValue, originalValue);
  }
}

仅在第一次写时（!mutated）才将原值上的其余属性拷贝到draftValue上

特殊的，浅拷贝时需要注意属性描述符、Symbol属性等细节：

// 跳过target身上已有的属性
function copyProps(target, source) {
  if (Array.isArray(target)) {
    for (let i = 0; i < source.length; i++) {
      // 跳过在更深层已经被改过的属性
      if (!(i in target)) {
        target[i] = source[i];
      }
    }
  }
  else {
    Reflect.ownKeys(source).forEach(key => {
      const desc = Object.getOwnPropertyDescriptor(source, key);
      // 跳过已有属性
      if (!(key in target)) {
        Object.defineProperty(target, key, desc);
      }
    });
  }
}

P.S.Reflect.ownKeys能够返回对象的所有属性名（包括 Symbol 属性名和字符串属性名）

整合

要想把拷贝值与原值整合起来，先要建立两种关系：

• 代理与原值、拷贝值的关联：根节点的代理需要将结果带出来
• 下层拷贝值与祖先拷贝值的关联：拷贝值要能轻松对应到结果树上

对于第一个问题，只需要将代理对象对应的draftState暴露出来即可：

const INTERNAL_STATE_KEY = Symbol('state');
function proxy(original, onWrite) {
  let draftState = {
    originalValue: original,
    draftValue,
    mutated: false,
    onWrite
  };
  const draft = new Proxy(original, {
    get(target, key, receiver) {
      // 建立proxy到draft值的关联
      if (key === INTERNAL_STATE_KEY) {
        return draftState;
      }
      //...
    }
  }
}

至于第二个问题，可以通过onWrite钩子来建立下层拷贝值与祖先拷贝值的关联：

// 创建下一层代理
function proxyProp(propValue, propKey, hostDraftState) {
  const { originalValue, draftValue, onWrite } = hostDraftState;
  // 下一层属性发生写操作时
  const onPropWrite = (value) => {
    // 按需创建父级拷贝值
    if (!draftValue.mutated) {
      hostDraftState.mutated = true;
      // 拷贝host所有属性
      copyProps(draftValue, originalValue);
    }
    // 将子级拷贝值挂上去（建立拷贝值的父子关系）
    draftValue[propKey] = value;
    // 通知祖先，向上建立完整的拷贝值树
    if (onWrite) {
      onWrite(draftValue);
    }
  };
  return proxy(propValue, onPropWrite);
}

也就是说，深层属性第一次发生写操作时，向上按需拷贝，构造拷贝值树

至此，大功告成：

function produce(original, producer) {
  const draft = proxy(original);
  // 修改draft
  producer(draft);
  // 取出draft内部状态
  const { originalValue, draftValue, mutated } = draft[INTERNAL_STATE_KEY];
  // 将改过的新值patch上去
  const next = mutated ? draftValue : originalValue;
  return next;
}

四.在线 Demo

鉴于手搓的版本要比原版更精简一些，索性少个 m，就叫 imer：

• Git repo：ayqy/imer
• npm package：imer

五.对比 Immer

与正版相比，实现方案上有两点差异：

• 创建代理的方式不同：imer 使用new Proxy，immer 采用Proxy.revocable()
• 整合方案不同：imer 反向构建拷贝值树，immer 正向遍历代理对象树

通过Proxy.revocable()创建的 Proxy 能够解除代理关系，更安全些

而 Immer 正向遍历代理对象树也是一种相当聪明的做法：

When the producer finally ends, it will just walk through the proxy tree, and, if a proxy is modified, take the copy; or, if not modified, simply return the original node. This process results in a tree that is structurally shared with the previous state. And that is basically all there is to it.

比onWrite反向构建拷贝值树直观很多，值得借鉴

P.S.另外，Immer 不支持Object.defineProperty()、Object.setPrototypeOf()操作，而手搓的 imer 支持所有的代理操作

参考资料

• immerjs/immer v4.0.1
• Introducing Immer: Immutability the easy way

有所得、有所惑，真好

关注「前端向后」微信公众号，你将收获一系列「用心原创」的高质量技术文章，主题包括但不限于前端、Node.js以及服务端技术

本文首发于 ayqy.net ，原文链接：http://www.ayqy.net/blog/new%...