const observer = (initialState, cb) => {
  const proxy = new Proxy(initialState, {
    get(target, key, receiver) {
      const val = Reflect.get(target, key, receiver);
      return typeof val === "object" && val !== null ? observer(val, cb) : val; // 遞歸處理object類型
    },
    set(target, key, val) {
      const ret = Reflect.set(target, key, val);
      cb();
      return ret;
    },
    deleteProperty(target, key) {
      const ret = Reflect.deleteProperty(target, key);
      cb();
      return ret;
    },
  });
  return proxy;
};

上面這個observer完成了對數據的基本操作代理。

這里補充一個知識點: 為什么Proxy代理的對象經常搭配Reflect而不是操作符訪問？

Reflect更加全面，功能更強大：

只要Proxy對象具有的代理方法，Reflect對象全部具有，以靜態(tài)方法的形式存在。這些方法能夠執(zhí)行默認行為，無論 Proxy 怎么修改默認行為，總是可以通過 Reflect 對應的方法獲取默認行為。

比如上文第4行這里 Reflect.get(target,key,receiver)咋一看似乎可以和target[key]等價，但實際上不是的看下面的例子，正是由于Reflect的靜態(tài)方法的第三個參數receiver可以用來指定被調用時的this，所以使用 Reflect.get(target,key,receiver) 才能如我們預期返回正確結果。

let o = {
  getb() {
    return this.a;
  },
};
let o1 = Object.create(
  newProxy(o, {
    get(target, key, receiver) {
      return Reflect.get(target, key, receiver);
    },
  })
);
o1.a = 42;
o1.b; // 42

let o2 = Object.create(
  newProxy(o, {
    get(target, key) {
      return target[key];
    },
  })
);

o2.a = 42;
o2.b; // undefined

修改某些Object方法的返回結果，讓其變得更合理。比如，Object.defineProperty(obj, name, desc)在無法定義屬性時，會拋出一個錯誤，而Reflect.defineProperty(obj, name, desc)則會返回false。
讓Object操作都變成函數行為。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)讓它們變成了函數行為。

const useReactive = (initState) => {
  return observer(initState);
};

我們的基本結構大概如上面代碼段所示，但是這里有兩個問題 :

1.我們希望函數組件每次 執(zhí)行的時候它都引用同一個代理對象

2.在組件的生命周期里observer只需要代理一次

使用useRef創(chuàng)建同一份數據引用

看到維護同一份數據我們第一反應可能就是使用閉包來創(chuàng)建引用，但是如此就還需要我們手動維護組件的創(chuàng)建卸載和這份數據的關系，而React中天生就包含了ref 這樣的api，所以我們不需要從自行管理數據的卸載和綁定，在函數組件中直接使用useRef就可以達到我們的目的。

const useReactive = (initState) => {
  const ref = useRef(initState);
  return observer(ref.current);
};

這樣子我們就使用useRef和Proxy實現了對initialState的代理

添加更新handler

我們發(fā)現還少了一個handler即數據更改后觸發(fā)組件更新,其實到這一步就比較簡單了只需要在操作ref的值之后setState一下就可以了。

因為是在函數組件內部所以我們可以直接借用useState引入一個“更新觸發(fā)器”,并將這個觸發(fā)器傳入observer代理方法。

function useReactive<S extends object>(initialState: S): S {
    const [, setFlag] = useState({});
    const ref = useRef < S > (initialState)
    return observer(ref.current, () => {
        setFlag({}); // {} !== {} 因此會觸發(fā)組件更新
    });
}

去除多次Proxy

在完成上面幾個步驟之后，我們基本已經可以實現開頭demo中的效果了，但是還有一個問題:

由于是函數組件在state更新之后useReactive也會執(zhí)行，因此observer就會被多次執(zhí)行，而我們的預期，這個代理行為應該只在組件創(chuàng)建之初執(zhí)行一次就可以了，因此這里我們也需要進行一些改造，方法依然是依靠 ref在函數組件多次執(zhí)行時返回同一份數據這個特點：

function useReactive(initialState) {
  const refState = useRef(initialState);
  const [, setUpdate] = useState({});
  const refProxy = useRef({
    data: null,
    initialized: false,
  });
  // 在創(chuàng)建proxy的ref時我們加一個initialized標志位，這樣當組件state更新執(zhí)行時
  // useReactive再次執(zhí)行就可以根據這個標志位來決定是直接返回current上的data值還是重新執(zhí)行proxy了
  if (refProxy.current.initialized === false) {
    refProxy.current.data = observer(refState.current, () => {
      setUpdate({});
    });
    refProxy.current.initialized = true;
    return refProxy.current.data;
  }
  return refProxy.current.data;
}

添加緩存完善代碼

上面解決了函數組件更新方式所帶來的重復執(zhí)行問題，這里還需要解決外部操作導致的重復代理，即如果一個initialState已經被代理過了，那么我們是不希望它被二次代理的（用戶可能使用了兩次useReactive來代理同一個對象），我們可以使用 WeakMap來進行緩存記錄

const proxyMap = new WeakMap();
const observer = (initialState, cb) => {
  const existing = proxyMap.get(initialState);
  // 添加緩存 防止重新構建proxy
  if (existing) {
    return existing;
  }

  const proxy = new Proxy(initialState, {
    get(target, key, receiver) {
      const val = Reflect.get(target, key, receiver);
      return typeof val === "object" && val !== null ? observer(val, cb) : val; // 遞歸處理object類型
    },
    set(target, key, val) {
      const ret = Reflect.set(target, key, val);
      cb();
      return ret;
    },
    deleteProperty(target, key) {
      const ret = Reflect.deleteProperty(target, key);
      cb();
      return ret;
    },
  });
  proxyMap.set(initialState, proxy);
  return proxy;
};

總結

至此我們的useReactive就基本可用了，回顧一下全部代碼：

const proxyMap = new WeakMap();

const observer = (initialState, cb) => {
  const existing = proxyMap.get(initialState);
  if (existing) return existing;
  const proxy = new Proxy(initialState, {
    get(target, key, receiver) {
      const val = Reflect.get(target, key, receiver);
      return typeof val === "object" && val !== null ? observer(val, cb) : val; // 遞歸處理object類型
    },
    set(target, key, val) {
      const ret = Reflect.set(target, key, val);
      cb()
      return ret;
    },
    deleteProperty(target, key) {
      const ret = Reflect.deleteProperty(target, key);
      cb();
      return ret;
    },
  });
  return proxyMap.set(initialState, proxy) && proxy;
};

function useReactive(initialState) {
  const refState = useRef(initialState);
  const [, setUpdate] = useState({});
  const refProxy = useRef({
    data: null,
    initialized: false,
  });
  if (refProxy.current.initialized === false) {
    refProxy.current.data = observer(refState.current, () => {
      setUpdate({});
    });
    refProxy.current.initialized = true;
    return refProxy.current.data;
  }
  return refProxy.current.data;
}