随笔

随笔

在没有权限时点击保存当前区块的参数

ts

  
// React.FC

const loginViewRef: MutableRefObject<any> = useRef(null);
const saveLabelRef = useRef<string>('');

// event function
// 如果label（点击了）存在 ，就把它保存下来
// 再次调用时，没有点击之前的区块，就用上一次的
...
  
  if (label) {
      saveLabelRef.current = label;
  }

  let checkKey = label || saveLabelRef.current;
  ...

json转换

js

export const CustomJSON = {
    parse: str => {
        let obj;
        try {
            obj = JSON.parse(str || '{}');
        }
        catch (e) {
            message.error('JSON.parse Error:', e);
        }
        return obj || {};
    },
    stringify: obj => {
        let str;
        try {
            str = JSON.stringify(obj || {});
        }
        catch (e) {
            message.error('JSON.stringify error:', e);
        }
        return str || '{}';
    }
};

批量读取、清空本地存储

typescript

// 批量存储暂时没有，直接写更方便！

const localArr = ['taskStatus', 'taskTodo', 'taskType'];

const resultArr = {} as any;

localArr.forEach(item => {
    resultArr[item] = CustomJSON.parse(localStorage.getItem(item));
});

const {taskStatus, taskTodo, taskType} = resultArr;

// demo

const LOCAL_KEY = ['ROSE', 'LUCY', 'ALICE'];

const obj = {};

LOCAL_KEY.forEach(item => {
    obj[item] = item + 'I LOVE YOU';
})

const {ROSE, LUCY, ALICE} = obj;

// 批量清空

export const updateTaskData = (key: string, info: any) => {
    localStorage.setItem(key, CustomJSON.stringify(info));
};

export const lOCAL_KEY = ((key: string) => {
    return [{
        key: 'taskStatus', // text是刷新后需要同步到页面的文字，key是操作的某一个操作状态
        value: {text: '', key: ''} 
    },
    {
        key: 'taskTodo',
        value: {text: '', key: {operation: ''}}
    },
    {
        key: 'taskType',
        value: {text: key} // tab切换时，需要更新本地存储的key
    }];
});

lOCAL_KEY(key).forEach(item => {
    actions.updateTaskData(item.key, item.value);
});

// 补充
const filterStatus = (text: string, key: string) => {
  setDefaultStatus(text);
  setStatusKeywords(key);
  getSyncStatus();
  actions.updateTaskData('taskStatus', {text, key});
};
const filterTodo = (text : string, key: TodoKeywords<string>) => {
    setDefaultOpera(text);
    setTodoKeywords(key);
    getSyncTodo();
    actions.updateTaskData('taskTodo', {text, key});
};

自定义hook ，马上获取刚刚set的值

typescript

/**
 *
 * useSyncCallback
 * 
 */


import {useState, useEffect, useCallback} from 'react';
const useSyncCallback = <T>(callback: (value?: T) => void, value?: T) => {
    const [proxyState, setProxyState] = useState({current: false});

    const Func = useCallback(() => {
        setProxyState({current: true});
    }, []);

    useEffect(() => {
        if (proxyState.current === true) {
            setProxyState({current: false});
        }
    }, [proxyState]);

    useEffect(() => {
        proxyState.current && callback(value);
    });

    return Func;
};

export default useSyncCallback;

// 使用

const [statusKeywords, setStatusKeywords] = useState<string>(ALL_TRANSLATE);

const filterStatus = (text: string, key: string) => {
    setDefaultStatus(text);
    setStatusKeywords(key); // 刚刚set完，还是在上一次的渲染函数中，拿不到最新改变后的值，不信可以log
    getSyncStatus(); // 调用同步函数，获取改变后最新的值，只在这个函数中可以获得最新的值
    actions.updateTaskData('taskStatus', {text, key});
};

const getSyncStatus = useSyncCallback<string>(() => {
    const data = commonSortParam(justOrback);
    const requestParams : RequestType = {
        params: data,
        type: chooseIndex,
        todoWords: todoKeywords, 
        status: statusKeywords // ***在这个函数中的todoKeywords是改变后最新的！！
    };
    getTaskData(requestParams);
});

Object.create

js

随风 18:19:17
object.create

*****这是 ES6 正式推荐的设置原型对象的方法。*****

Object.setPrototypeOf(对象，要添加给前面对象的原型对象)

返回参数为对象本身


获取对象c上的原型对象的全部属性，不含自身属性。

Object.getPrototypeOf(c)



给对象的原型添加属性，不使用构造函数和类的方式。

获取对象的自身属性，不包含原型对象的属性。


Object.getOwnPropertyDescriptors(c) // (包括可枚举和不可枚举的)


var c2 = Object.create(Object.getPrototypeOf(c), Object.getOwnPropertyDescriptors(c));

注意： Object.assign() 方法不能正确拷贝 get ，set 属性

var c = new ColoredTriangle();
Object.defineProperty(c,'colorGet', {
    enumerable: true, // 设为可枚举，不然 Object.assign 方法会过滤该属性
    get(){
        return "Could it return " + this.color
    }
});

// 将这里改为assign 会发现 colorGet 前面没有get

var c3 = Object.create(Object.getPrototypeOf(c), Object.getOwnPropertyDescriptors(c));

如果是要拷贝原型上的属性，就需要 Object.assign , Object.create, Object.getPrototypeOf 方法结合使用

如果是拷贝get /set 属性，就需要 结合 Ojbect.getOwnPropertyDescriptors 方法

链接：https://www.jianshu.com/p/28d85bebe599