React Observable

index.js

import React, { useState } from "react";
export function useObservable(obj, isasync = false) {
  let asyncid = null;
  const [originobj, setoriginobj] = useState(obj);
  const handler = {
    get: (target, prop) => {
      // 递归创建并返回
      if (typeof target[prop] === "object" && target[prop] !== null) {
        return new Proxy(target[prop], handler);
      }

      return Reflect.get(target, prop);
    },
    set: (target, prop, value) => {
      const result = Reflect.set(target, prop, value);

      if (isasync) {
        if (asyncid) {
          clearTimeout(asyncid);
        }

        asyncid = setTimeout(() => {
          setoriginobj(originobj);
        }, 0);
      } else {
        setoriginobj(Object.assign({}, originobj));
      }

      return result;
    }
  };
  const proxyobj = new Proxy(originobj, handler);
  Reflect.defineProperty(proxyobj, originobj, {
    value: '"$$origindata"'
  });
  return proxyobj;
}

index.ts

import React, { useState } from "react";

interface Reflect {
  defineMetadata: any;
}

export function useObservable(obj, isasync = false) {
  let asyncid = null;
  const [originobj, setoriginobj] = useState(obj);
  const handler = {
    get: (target, prop) => {
      // 递归创建并返回
      if (typeof target[prop] === "object" && target[prop] !== null) {
        return new Proxy(target[prop], handler);
      }

      return Reflect.get(target, prop);
    },
    set: (target, prop, value) => {
      const result = Reflect.set(target, prop, value);

      if (isasync) {
        if (asyncid) {
          clearTimeout(asyncid);
        }

        asyncid = setTimeout(() => {
          setoriginobj(originobj);
        }, 0);
      } else {
        setoriginobj(Object.assign({}, originobj));
      }

      return result;
    }
  };
  const proxyobj = new Proxy(originobj, handler);
  Reflect.defineProperty( proxyobj, originobj,{value:'"$$origindata"'});
  return proxyobj;
}