react 响应式数据操作,直接修改属性即可刷新视图

174 阅读1分钟
import { usestate, useRef } form 'react'
import { isPlainObject } from 'lodash'

const useProxy = initData => {
    const [state, serState] = useState(initData);
const handler = useRef({
    get(target, key, receiver) {
        const res = Reflect.get(target, key, receiver);
        return isPlainObject(res) || Array.isArray(res) ? new Proxy(target[ket], handler) : res;
    },
    set(target,key,value){
        Reflect.set(target,key,value);
        setState({…target});
        return true;
    },
    deleteProperty(target,key){
        Reflect.deleteProperty(target,key);
        serState({…target})
        return true;
    }
}).current;

const proxyData = useRef(new Proxy(state,handler)).current;
return proxyData;

}

expot default useProxy;

使用

const state = useProxy({
    count: 0,
    name: "hello",
    arr:['lalala'],
    addArr(args) {
       this.arr.push(123) 
    },
    get arrCount() {
        return this.arr.length;
    },
    data:{
        name:'word'
    },
    reg: /123/,
    flag: true

 })