总算优化好两个 React Hooks 了

2022-02-21

今天的工作任务也是一如既往的平淡,也就是继续对新 DA 和 APM 搞了两下,然后动了动 Coupon 项目。期间本来想对项目的 Antd 进行升级,结果发现了一个比较麻烦的事情,就是我原先的按需引用 Less 方式在新版会出现变量丢失什么的,捣鼓了一阵子,也上网查了下类似问题,暂无简单直接的解决方法,于是又把版本号还原回去了。

睡前把自己的 useParamsuseSearchParams Hooks 都应用到自己小窝后台项目的搜索表单上了,期间主要发现 useParams_defaultValue 变量有些问题,其实是因为 Hooks 被多次调用,但变量只有一个,被反复覆盖了。

我所认为的正确方式还是得在 Hooks 函数里面使用 useState + useEffect 记录第一个值,相当于 Hooks 被使用一次,就有一个独立的「默认值」状态。

这个 Hooks 的使用方式简而言之大概就是这样,比较适合搜索表单的状态管理和提交参数的构建,从数据源头上解决类型混乱的问题。

// setParams 的机制是,保留当前设置的值
// resetParams 的机制是,保留初始化的值
let [params, setParams, resetParams] = useParams();

// { a: 1 } 使用 setParams({ a: 2, b: 2 }) 就会是 {a: 2, b: 2}
// { a: 1 } 使用 setParams({ a: 2, b: 2 }) 再 resetParams() 就会回到 {a:1}
// { a: 1 } 使用 setParams({ a: 2, b: 2 }) 再 resetParams({ b: 3 }) 就会是 {a:1, b: 3}

今日原神进度:

  • 日常委托和刷体力
  • 完成三界路飨祭(渊下宫)其三
  • 完成三界路飨祭(渊下宫)后日谭
配乐 大雨 开心
概览页 时间轴
奇趣音乐盒 技术源于 Kico Player
Emmm,这里是歌词君