更新数据,不更新组件,自定义hooks

264 阅读1分钟

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>  );}