React HOOK：useReducer 与 useState区别？(面试)

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
  ​

•