let objA = { name: 'zhufeng' };
let objB = objA;
objB.name = 'jiagou';
console.log(objA.name);
cnpm i --save immer
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);
src\immer\index.js
export {produce} from './core';
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
import * as is from './is';
export const INTERNAL = Symbol('INTERNAL');
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;
const proxyOfChild = keyToProxy[key];
const { draftState } = proxyOfChild[INTERNAL];
internal.draftState[key] = draftState;
valueChange && valueChange();
})
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;
}
}
}
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')
);
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;
src\immer\index.js
export {produce} from './core';
+export {default as useImmerState} from './useImmerState';