typescript 不熟,有问题欢迎指出
这种方式一样适用于 vue 用以减少数据劫持问题
无需冻结数据,或者转换数据
具体vue 的demo就不写了,可以自己玩玩
// 自定义hook
interface ObjType { [str: string]: any;}export function useRefState(initData: ObjType): [ObjType, Function, Function] { let [up, setUp] = useState({}); let refObj = useRef(initData); let state = refObj.current; function update(obj?: ObjType) { assign(obj); setUp({}); } function assign(obj?: ObjType) { if (obj) { refObj.current = Object.assign(refObj.current, obj); state = refObj.current; } } // state 状态数据 // update 组件更新 // assign 数据合并 return [state, update, assign];}
// 使用demofunction RefStateDemo() { let [state, update, assign] = useRefState({ a: 1, b: 2 }); // 三个按键的点击事件 function onClick1() { assign({ a: state.a + 1, b: state.b - 1 }); } function onClick2() { update(); } function onClick3() { update({ a: state.a + 1, b: state.b - 1 }); } return ( <div> {JSON.stringify(state)} <button onClick={onClick1}>数据更新,组件不更新</button> <button onClick={onClick2}>数据不更新,组件更新</button> <button onClick={onClick3}>都更新</button> </div> );}