React TS中基于useReducer写的自定义状态hook,使用是否有风险?
关于useCustomState自定义Hook的安全性分析
这个Hook在符合预期的使用场景下基本可用,但存在几个明确的隐患需要注意:
- 不支持函数式更新
原生useState支持传入更新函数获取最新的前序状态计算新值,你当前的实现仅支持传入部分状态对象。如果更新逻辑依赖前序状态,只能手动读取当前状态计算,异步场景下非常容易触发闭包陷阱拿到旧状态。 - 仅支持浅层合并
reducer中的对象展开是浅拷贝逻辑,如果你的状态包含深层嵌套对象,局部更新嵌套对象属性时会直接覆盖整个上层对象,导致未显式声明的属性丢失。比如初始状态为{ user: {name: '张三', age: 20} },传入{user: {name: '李四'}}更新后,user.age属性会被直接移除。 - 不支持基础类型状态
如果传入的初始状态是数字、字符串等基础类型,reducer的展开逻辑会直接将其转换为空对象,完全不符合预期,同时会触发类型报错。 - 冗余的惰性初始化逻辑
useReducer第三个参数是用于惰性初始化的回调,你这里传入的(state) => state没有实际作用,直接省略该参数传入初始值即可,不会影响逻辑但属于无效代码。
如果你能明确你的使用场景均为单层对象状态、不需要函数式更新、也不会传入基础类型作为初始状态,这个Hook使用是安全的。如果要扩展通用性,建议补充对函数式更新的支持,同时可以在文档中明确标注仅支持浅层合并的限制,避免使用者踩坑。
内容的提问来源于stack exchange,提问作者Cansın Memiş
相关产品推荐
相关产品推荐

