useReducer vs useState(面试)
useReducer和useState都可以用来管理组件的状态,它们之间最大的区别就是:
useReducer将状态和状态的变化统一管理在reducer函数里面,这样对于一些复杂的状态管理会十分方便我们debug,因为它对状态的改变是封闭的。而由于useState返回的setState可以直接在任意地方设置我们状态的值,当我们组件的状态转换逻辑十分复杂时,它将很难debug,因为它是开放的状态管理。
总体的来说,在useReducer和useState如何进行选择的问题上我们可以参考以下这些原则:
-
useState情况使用
- state的值是JS原始数据类型,如number, string和boolean等
- state的转换逻辑十分简单
- 组件内不同的状态是没有关联的,它们可以使用多个独立的useState来单独管理
-
useReducer情况使用
- state的值是object或者array
- state的转换逻辑十分复杂, 需要使用reducer函数来统一管理
- 组件内多个state互相关联,改变一个状态时也需要改变另一个,放在同一个state内使用reducer来统一管理
- 状态定义在父级组件,不过需要在深层次嵌套的子组件中使用和改变父组件的状态,可以同时使用useReducer和useContext两个hook,将dispatch方法放进context里面来避免组件的props drilling
- 如果你希望你的状态管理是可预测的和可维护的,请useReducer
- 如果你希望你的状态变化可以被测试,请使用useReducer