react hooks之useState与useReducer

useState 和 useReducer 是 React 中用于管理组件状态的两个 Hook，它们各有特点和适用场景，在看学习中我发现这两个hook实际上能实现的功能是相同的，区别是简单与复杂场景之间的使用。

相同点

1. 状态管理: 两者都用于管理组件的状态。
2. 函数式组件: 两者都只能在函数式组件中使用。
3. 性能优化: 两者都通过避免不必要的渲染来优化性能。

不同点

1. 状态的复杂度:

   • useState 适用于管理简单状态，例如布尔值、数字、字符串或对象。
   • useReducer 适用于管理复杂状态或当状态更新逻辑涉及多个子值时。它使用 reducer 函数来处理状态的更新，类似于 Redux 中的 reducer。

2. 状态更新的方式:

   • useState 通过直接调用状态更新函数来更新状态。
   • useReducer 通过 dispatch 一个 action 对象来更新状态。reducer 函数接收当前状态和 action，返回新的状态。

3. API 不同:

   • useState 返回一个状态值和一个更新该状态的函数。
   • useReducer 返回当前状态和 dispatch 函数。

使用场景

1. useState 使用场景:

   • 适合管理简单的、本地的状态。
   • 适用于状态逻辑不复杂的情况。
   • 示例：

     const [count, setCount] = useState(0);
     

2. useReducer 使用场景:

   • 适合管理复杂的状态，特别是状态更新逻辑复杂或状态结构嵌套较深的情况。
   • 适用于需要多个子状态的更新逻辑。
   • 示例：

     const initialState = { count: 0 };
     function reducer(state, action) {
       switch (action.type) {
         case 'increment':
           return { count: state.count + 1 };
         case 'decrement':
           return { count: state.count - 1 };
         default:
           throw new Error();
       }
     }
     const [state, dispatch] = useReducer(reducer, initialState);
     

何时选择 useState 或 useReducer

• 选择 useState:

  • 当状态简单且更新逻辑不复杂时。
  • 当你只需要在少数几个地方更新状态时。

• 选择 useReducer:

  • 当状态结构复杂，需要处理多个子状态时。
  • 当状态更新逻辑复杂且需要在多个地方处理时。
  • 当希望在状态管理上使用类似于 Redux 的模式时。