crootfast/template/shared/hooks/react/useToolReactive.js

大前端工程化命令行脚手架

import React, { useState, useMemo } from 'react';

export function useReactive(value) {
  let proxyVlaue;
  if (typeof value !== 'object') {
    proxyVlaue = { value };
  } else {
    proxyVlaue = value;
  }

  const [defineProperty, setDefineProperty] = useState(null);
  const ob = defineReactive(proxyVlaue);
  setDefineProperty({ ...ob });

  return useMemo(() => defineProperty, [defineProperty]);
};

function defineReactive(options = {}, setState = () => { }) {
  for (let key in options) {
    if (typeof options[key] === 'object' && options[key] !== null) {
      options[key] = observReactive(options[key]);
    }
  }
};

function observReactive(options = {}) {
  return new Proxy(options, {
    get(target, property) {
      console.log(`读取了 ${property}`);
      return Reflect.get(target, property);
    },
    set(target, property, value) {
      const oldValue = target[property];
      if (oldValue === value) {
        console.log(`尝试设置 ${property}，但新旧值相同，无需设置`);
        return true;
      }

      if (typeof value === 'object' && value !== null) {
        value = observReactive(value);
      }
      console.log(`设置了 ${property}，新的值为 ${value}`);
      return Reflect.set(target, property, value);
    },
    deleteProperty(target, property) {
      console.log(target, `删除了 ${property}`);
      // setState({ ...options });
      return Reflect.deleteProperty(target, property);
    }
  });
};