ES6 Proxy 在 Immer 中的妙用

分类：ES6作者：佚名

写在前面

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：

 

五.对比 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 支持所有的代理操作

 

参考资料

 

原文地址：https://www.cnblogs.com/ayqy/p/es6-proxy-in-immer.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

ES6模块的import和export用法总结
原文连接：https://www.cnblogs.com/dupd/p/5951311.htmlES6之前已经出现了js模块加载的方案，最主要的是CommonJS和AMD规范。commonjs主要应用于服务器，实现同步加载，如nodejs。AMD规范应用于浏览器，如requirejs，为异步加载。同时还有CMD规范，为同步加载方案如seaJS。ES6在语言规格的层面上，实现了模块功能，而且...
浅谈Es6中import * as xxx from几种基本用法
以为Es6，javascript第一次支持了module。ES6的模块化分为导出（export）与导入（import）两个模块，其中在项目中，我们会经常看到一种用法import * as obj from，这种写法是把所有的输出包裹到obj对象里。示例一 1 2 3 4 5 6 7 // index.js export function fn1(data){ console.log(1) } export f.
ES6系列文章 异步神器async-await
视频讲解关于异步处理，ES5的回调使我们陷入地狱，ES6的Promise使我们脱离魔障，终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。async-await和Promise的关系经常会看到有了 async-await、promise 还有必要学习吗、async await优于promise的几个特点，接收了这些信息后，就蒙圈了。现在才知道...
TypeScript看完就会了
TypeScript什么是TypeScript?TypeScript是由微软开发的一款开源的编程语言TypeScript是JavaScript的超集，遵循最新的ES5 ES6规范，TypeScript扩展了JavaScript的语法TypeScript更像后端 Java c# 这样的面向对象语言可以让js开发大型企业项目谷歌也在大力支持TypeScript的推广，React ，VUE 都集成了TypeScriptTypeScript安装安装-- 安装npm install -g type
typeScript 变量名 冒号 类名 ＜–这种写法什么意思?
export class AppComponent { title = 'Tour of heroes'; hero: Hero = { id: 1, name: '张三' };}export class Hero { id: number; name: string;}就是这一段,看起来有点晕,这里是实例化一个Hero类型的对象hero,还是创建一个变量?后面是赋值,但是不知道什么意思?hero: Hero = { id: 1, na.
用 async/await 来处理异步
用 async/await 来处理异步昨天看了一篇vue的教程，作者用async/ await来发送异步请求，从服务端获取数据，代码很简洁，同时async/await 已经被标准化，是时候学习一下了。先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数async function timeout() {return 'hello world'
es6之解构赋值
es6的语法已经出了很长的时间了，在使用上也可以通过babel这类的编译工具转译为浏览器可以识别的es5的语法，但是依旧有很多开发在写代码的时候，依旧没有用es6的语法，而是习惯使用老的语法，这篇文章主要会介绍解构赋值基本用法以及在实际使用场景中相比es5语法的优势，让大家从根本上了解es6语法的优势基本用法数组解构让我们一起先来看数组解构的基本用法：let [a, b, c] ...
TypeScript 定义函数的几种写法
参考链接1 参考链接2写法1 - 使用 function 关键字function greeter(fn: (a: string) =&gt; void) { fn("Hello, World");}function printToConsole(s: string) { console.log(s);}greeter(printToConsole);(a: string) =&gt; void上述语法的含义：表示一个函数，接收一个字符串作为输入参数，没有返回参数。可
es6
ES6简介-ECMAScript是javascript标准-ES6就是ECMAScript的第6个版本-ECMAScript6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ES6新增加的功能：1.let
ES6的函数写法总结，一看就会！
ES6  在ES5的基础上增加了一些新的特性和写法，特别在函数写法上，增加了箭头函数 1.正经的函数写法//普通的传递值的写法functionsum1(x,y){returnx+y;}constres=sum1(2,3);console.log(res);//传递对象的方式,调用时需要传递一个对象过去function
JavaScript中的es5及es6新增的内容
ES5及ES6es表示ECMASCript，他是从es3，es5，es6，es5是2009.12月发布的，es6是2015.6月发布的。vue2完全支持es5的（vue3完全支持es6的），react完全支持es6es5的新特性严格模式（对应的相反的称为怪异模式）'usestrict'//一般用于相关的设计上面书写一个严格模式底下的代码就需要按照严格模
ES5及ES6
ES5的严格模式所谓严格模式，从字面上就很好理解，即更严格的模式，在这种模式下执行，浏览器会对JS的要求更苛刻，语法格式要求更细致，更符合逻辑。怪异模式：就是我们之前一直使用的开发模式，就叫怪异模式。因为很多时候出来的结果是非常怪异的，所以才称之为怪异模式。'usestrict'//一般用
es6 export和export default的区别
相同点export与exportdefault均可用于导出常量、函数、文件、模块可在其它文件或模块中通过import+(常量|函数|文件|模块)名的方式，将其导入，以便能够对其进行使用不同点一、在一个文件或模块中，export、import可以有多个，exportdefault仅有一个//model.jsle
学习ES6[尚硅谷二]笔记
24.class类 25.class中的extend 26.super关键字 27.super应用 28.class属性 30.静态成员和实例成员 31.构造函数问题 32.构造函数原型 33.原型链 34.js查找机制 35.原型对象中this指向 36.扩展内置对象方法 37.call方法 38.借用父构造函数
【JS高级】es6
什么是ES6ES的全称是ECMAScript,它是由ECMA国际标准化组织,制定的一项脚本语言的标准化规范。泛指2015年发布的es2015版极其后续版本ES6中新增语法letES6中新增的用于声明变量的关键字。注意:使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特
JavaScript ES6新增
命名修饰符let：不能重复声明变量、块级作用域leta=1;leta=2;//报错const：初始化常量，必须给初始值，否则报错、在同一个作用域内，const定义的常量不能修改其值、块级作用域consta=10a=100//报错，不能重复声明解构constobj={name:'jack'age:18sex:'
ES6
ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。1{2leta=10;3varb=1;4}56a//ReferenceError:aisnotdefined.7b//1上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用
ES6基础知识解构赋值
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatib
es6 正则的扩展
一，RegExp构造函数es5中，RegExp构造函数的参数有两种情况。1，参数是字符串，第二个参数表示正则表达式的修饰符（flag）。2，参数是一个正则表达式，返回一个原有正则表达式的拷贝。es6中，如果RegExp构造函数第一个参数是一个正则对象，那么可以使用第二个参数指定修饰符。而
ES6学习笔记二-字符串的扩展
一、字符的Unicode表示法JavaScript允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的Unicode码点。表示法只限于码点在\u0000~\uFFFF之间的字符，超过该范围需要用两个双字节表示ES6改进：将码点放入大括号，就能正确解读该字符。转换参考：https://blog.csdn.net/hezh1994/ar
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot