immer.js学习笔记

前言

React和Redux都遵守组件状态为不可变（immutable）的理念，通常在修改state的时候都会使用到es6的解构语法或者Object.assign()。

使用immer.js

比起Facebook亲自打造的immutable.js，immer.js比immutable.js体积更小，不需要去记immutable.js里像Collection、List、Map、Set、Record这样的数据结构，使用的时候还需要toJS()转换成数组和对象才能正常使用。

往list里面添加新的一项使用解构的方式要这样写

interface StateType {
  name: string,
  todoList: {
    list: { name: string, done: boolean }[]
  }
}

const App: React.FC = () => {
  const [state, setState] = useState<StateType>({
    name: 'lin',
    todoList: {
      list: [{ name: '学习react', done: true }]
    }
  })

  const addTodoList = () => {
    setState(state => ({
      name: state.name,
      todoList: {
        list: [...state.todoList.list, { name: '学习immer源码', done: true }]
      }
    }))
  }

  // ......
}

使用immer

import { produce } from 'immer'

interface StateType {
  name: string,
  todoList: {
    list: { name: string, done: boolean }[]
  }
}

const App: React.FC = () => {
  const [state, setState] = useState<StateType>({
    name: 'lin',
    todoList: {
      list: [{ name: '学习react', done: true }]
    }
  })

  const addTodoList = () => {
    setState(produce(state => {
      state.todoList.list.push({ name: '学习immer源码', done: true })
    }))
  }
  
  // ......
}

immer原理

immer工作原理就是把produce方法传入的第一个参数作为初始值initialState，通过es6的proxy进行代理返回一个draft代理对象，如果当前环境不支持proxy则会使用Object.defineProperty()实现监听，进行get、set的拦截把只有改变了的部分会从draft映射到初始对象当中。

draft代理对象的一些描述字段

{
  modified, // 是否被修改过
  finalized, // 是否已经完成（所有 setter 执行完，并且已经生成了 copy）
  parent, // 父级对象
  base, // 原始对象（也就是 obj）
  copy, // base（也就是 obj）的浅拷贝，使用 Object.assign(Object.create(null), obj) 实现
  proxies, // 存储每个 propertyKey 的代理对象，采用懒初始化策略
}

Produce

Immer 的核心源码在 immerClass.ts 这个类上的produce方法，produce方法里面会通过createProxy这个方法创建一个代理对象。

produce: IProduce = (base: any, recipe?: any, patchListener?: any) => {
  /* 如果第一个参数传入的是函数而不是一个对象且第二个参数不是函数，则采用curried函数的方式。*/
  if (typeof base === "function" && typeof recipe !== "function") {
    /* 第二个参数就变成了初始值 */
    const defaultBase = recipe
    /* 第一个参数变成了recipe函数 */
    recipe = base

    const self = this
    return function curriedProduce(
      this: any,
      base = defaultBase,
      ...args: any[]
    ) {
      /* 将修改后的参数从新传入正常的produce函数 代理对象draft实际是recipe函数的第一个参数，初始值取的是produce的第二个参数 */
      return self.produce(base, (draft: Drafted) => recipe.call(this, draft, ...args))
    }
  }

  // ... 略

  let result

  /* 只有对象 数组 和 "immerable classes" 可以进行代理 */
  if (isDraftable(base)) {
    /* scope 是 immer 的一个内部概念，当目标对象有复杂嵌套时，利用 scope 区分和跟踪嵌套处理的过程 */
    const scope = enterScope(this)
    /* 核销方法 createProxy 创建代理一个对象 */
    const proxy = createProxy(this, base, undefined)
    let hasError = true
    try {
      result = recipe(proxy)
      hasError = false
    } finally {
      if (hasError) revokeScope(scope)
      else leaveScope(scope)
    }
    if (typeof Promise !== "undefined" && result instanceof Promise) {
      return result.then(
        result => {
          usePatchesInScope(scope, patchListener)
          return processResult(result, scope)
        },
        error => {
          revokeScope(scope)
          throw error
        }
      )
    }
    usePatchesInScope(scope, patchListener)
    return processResult(result, scope)
  } else if (!base || typeof base !== "object") {
    result = recipe(base)
    if (result === NOTHING) return undefined
    if (result === undefined) result = base
    if (this.autoFreeze_) freeze(result, true)
    return result
  } else die(21, base)
}

createProxy

createProxy会判断传入的对象类型来采取不同的代理模式，一般情况下都是会使用createProxyProxy也就是Proxy进行代理

export function createProxy<T extends Objectish>(
    immer: Immer,
    value: T,
    parent?: ImmerState
): Drafted<T, ImmerState> {
    /* 根据传入的对象类型来采取不同的代理模式 */
    const draft: Drafted = isMap(value)
        ? getPlugin("MapSet").proxyMap_(value, parent) /* 传入的base对象是Map类型 */
        : isSet(value)
        ? getPlugin("MapSet").proxySet_(value, parent) /* 传入的base对象是Set类型 */
        : immer.useProxies_
        ? createProxyProxy(value, parent) /* 当前环境支持Proxy则使用Proxy进行代理 */
        : getPlugin("ES5").createES5Proxy_(value, parent) /* 当前环境不支持Proxy则使用Object.defineProperty() */

    const scope = parent ? parent.scope_ : getCurrentScope()
    scope.drafts_.push(draft)
    return draft
}

createProxyProxy

createProxyProxy会把初始对象base当作Proxy.revocable(target, handler)第一个参数target创建一个可撤销的代理对象。

export function createProxyProxy<T extends Objectish>(
    base: T,
    parent?: ImmerState
): Drafted<T, ProxyState> {
    const isArray = Array.isArray(base)
    const state: ProxyState = {
        type_: isArray ? ProxyType.ProxyArray : (ProxyType.ProxyObject as any),
        // Track which produce call this is associated with.
        scope_: parent ? parent.scope_ : getCurrentScope()!,
        // True for both shallow and deep changes.
        modified_: false,
        // Used during finalization.
        finalized_: false,
        // Track which properties have been assigned (true) or deleted (false).
        assigned_: {},
        // The parent draft state.
        parent_: parent,
        // The base state.
        base_: base,
        // The base proxy.
        draft_: null as any, // set below
        // The base copy with any updated values.
        copy_: null,
        // Called by the `produce` function.
        revoke_: null as any,
        isManual_: false
    }

    let target: T = state as any
    let traps: ProxyHandler<object | Array<any>> = objectTraps
    if (isArray) {
        target = [state] as any
        traps = arrayTraps
    }

    const {revoke, proxy} = Proxy.revocable(target, traps)
    state.draft_ = proxy as any
    state.revoke_ = revoke
    return proxy as any
}

• Proxy.revocable
• Proxy.revocable()方法可以用来创建一个可撤销的代理对象。该方法的返回值是一个对象，其结构为：{"proxy": proxy, "revoke": revoke} revoke 是一个撤销方法，一旦某个代理对象被撤销，它将变的几乎完全不可用，在它身上执行任何的可代理操作都会抛出TypeError异常。

es5的情况

当前环境不支持Proxy的情况最终会使用createES5Draft()方法来创建一个代理对象。

function createES5Draft(isArray: boolean, base: any) {
  /* 判断传入是数组还是对象 */
  if (isArray) {
    const draft = new Array(base.length)
    for (let i = 0; i < base.length; i++)
      /* 数组情况则是循环对里面的值利用Object.defineProperty()进行代理 */
      Object.defineProperty(draft, "" + i, proxyProperty(i, true))
    return draft
  } else {
    /* base传入的是对象 */
    const descriptors = getOwnPropertyDescriptors(base)
    delete descriptors[DRAFT_STATE as any]
    const keys = ownKeys(descriptors)
    for (let i = 0; i < keys.length; i++) {
      const key: any = keys[i]
      descriptors[key] = proxyProperty(
        key,
        isArray || !!descriptors[key].enumerable
      )
    }
    /* 这里没有直接使用Object.defineProperty()，而是使用了Object.create()的第二个参数对传入对象进行例如get、set拦截的属性配置 */
    return Object.create(Object.getPrototypeOf(base), descriptors)
  }
}

proxyProperty()方法返回代理对象的配置信息

function proxyProperty(
  prop: string | number,
  enumerable: boolean
): PropertyDescriptor {
  let desc = descriptors[prop]
  if (desc) {
    desc.enumerable = enumerable
  } else {
    descriptors[prop] = desc = {
      configurable: true,
      enumerable,
      get(this: any) {
        const state = this[DRAFT_STATE]
        if (__DEV__) assertUnrevoked(state)
        // @ts-ignore
        return objectTraps.get(state, prop)
      },
      set(this: any, value) {
        const state = this[DRAFT_STATE]
        if (__DEV__) assertUnrevoked(state)
        // @ts-ignore
        objectTraps.set(state, prop, value)
      }
    }
  }
  return desc
}

比较特别的是在传入需要代理的对象base的类型是object的情况下没有直接循环对象的属性进行Object.defineProperty()，而是使用了Object.create()的第二个参数对传入对象进行例如get、set拦截的属性配置。

Object.create()