immer

共享可变状态

共享可变状态是万恶之源，一个地方改动，其他地方受影响

let objA = { name: 'hs' };
let objB = objA;
objB.name = 'a';
console.log(objA.name);

解决方案

• 深度拷贝（性能差）
• immutable-js
• immutable

immer

• immer 是 mobx 的作者写的一个 immutable 库
• 核心实现是利用 ES6 的 proxy,几乎以最小的成本实现了 js 的不可变数据结构

cnpm i --save immer

produce

• 对 draftState 的修改都会反应到 nextState 上
• 而 Immer 使用的结构是共享的，nextState 在结构上又与 currentState 共享未修改的部分

基本使用

draft可以理解为草稿，会把baseState的浅拷贝给到draft

import { produce } from 'immer';
let baseState = {}

let nextState = produce(baseState, (draft) => {

})
console.log(baseState===nextState);
import { produce } from 'immer';
let baseState = {
  ids: [1],
  pos: {
    x: 1,
    y: 1 
  }
}

let nextState = produce(baseState, (draft) => {
  draft.ids.push(2);
})
console.log(baseState.ids === nextState.ids);//false
console.log(baseState.pos === nextState.pos);//true

尽可能的复用老节点，改变的节点及其父节点进行改变，其他不变

import { produce } from 'immer'

const baseState = {
  list: ['1', '2']
}
const result = produce(baseState, (draft) => {
  draft.list.push('3')
})
console.log(baseState);
console.log(result);

实现

immer\index.js

src\immer\index.js

export {produce} from './core';

immer\is.js

src\immer\is.js

export const isObject = (val) => Object.prototype.toString.call(val) === '[object Object]';
export const isArray = (val) => Array.isArray(val);
export const isFunction = (val) => typeof val === 'function';

src\immer\core.js

src\immer\core.js

import * as is  from './is';
export  const INTERNAL = Symbol('INTERNAL');
// baseState原状态
// producer处理器
export function produce(baseState, producer) {
    const proxy = toProxy(baseState);
    producer(proxy);
    const internal = proxy[INTERNAL];debugger
    return internal.mutated ? internal.draftState : baseState;
}

export function toProxy(baseState, valueChange) {
    let keyToProxy = {};
    let internal = {
        draftState: createDraftState(baseState),
        keyToProxy,
        // 此对象是否发生了变更
        mutated: false
    }
    return new Proxy(baseState, {
        get(target, key) {
            if (key === INTERNAL) {
                return internal;
            }
            const value = target[key];
            // 当访问某个属性的时候，就要对这个属性进行代理
            if (is.isObject(value) || is.isArray(value)) {
                if (key in keyToProxy) {
                    return keyToProxy[key];
                } else {
                    keyToProxy[key] = toProxy(value, () => {
                        internal.mutated = true;
                        // 取出key对应代理对象
                        const proxyOfChild = keyToProxy[key];
                        const { draftState } = proxyOfChild[INTERNAL];
                        internal.draftState[key] = draftState;
                        valueChange && valueChange();
                    })
                    // 如果是引用类型，要先得到对应的Proxy对象，然后返回这个的代理对象
                    return keyToProxy[key];
                }
            } else if (is.isFunction(value)) {
                internal.mutated = true;
                valueChange && valueChange();
                return value.bind(internal.draftState);
            }
            // 基本类型
            return internal.mutated ? internal.draftState[key] : baseState[key];
        },
        set(target, key, value) {
            internal.mutated = true;
            let {draftState}= internal;
            for (const key in target) {
                draftState[key] = key in draftState ? draftState[key] : target[key];
            }
            draftState[key] = value;
            valueChange && valueChange();
            return true;
        }
    });
    // 浅拷贝
    function createDraftState(baseState) {
        if (is.isArray(baseState)) {
            return [...baseState];
        } else if (is.isObject(baseState)) {
            return Object.assign({}, baseState);
        } else {
            // 基本类型
            return baseState;
        }
    }
}

useImmerState.js

基本使用

import React from 'react';
import ReactDOM from 'react-dom';
import {useImmerState} from './immer'
let id = 1;
function Todos() {
  const [todos, setTodos] = useImmerState({
    list: []
  })
  const addTodo = () => setTodos((draft) => {
    draft.list.push(id++)
  })
  return (
    <>
      <button onClick={addTodo}>增加</button>
      <ul>
        {
          todos.list.map((item, index) => <li key={index}>{item}</li>)
        }
      </ul>
    </>
  )
}
ReactDOM.render(
  <Todos />,
  document.getElementById('root')
);

useImmerState.js

src\immer\useImmerState.js

import { useState, useRef } from 'react';
import { toProxy, INTERNAL } from './core';
import * as is from './is';
function useImmerState(baseState) {
    const [state, setState] = useState(baseState);
    const draftRef = useRef(toProxy(baseState, () => {
        queueMicrotask(()=>{
            const internalState = draftRef.current[INTERNAL];
            const newState = internalState.draftState;
            setState(() => {
                return (is.isArray(newState) ? [...newState] : Object.assign({}, newState));
            });
        })
    }));
    const updateDraft = (producer) => producer(draftRef.current);
    return [state, updateDraft];
}
export default useImmerState;

immer\index.js

src\immer\index.js

export {produce} from './core';
+export {default as useImmerState} from './useImmerState';