React 中 useState 和 useReducer 的联系和区别

文章目录

• 使用场景
• • [使用 `useState`](#使用 useState)
  • [使用 `useReducer`](#使用 useReducer)
• 联系
• 区别
• • 用法
  • 状态更新逻辑
  • 适用场景
  • 可读性和可维护性

使用场景

使用 useState

• 状态逻辑简单。
• 只涉及少量的状态更新。
• 需要快速和简单的状态管理。

使用 useReducer

• 状态逻辑复杂。
• 涉及多个子状态或多种状态更新逻辑。
• 需要更好的可读性和可维护性。
• 想要使用类似 Redux 的状态管理模式。

联系

1. 状态管理：两者都是用来管理组件状态的 Hook。
2. 函数组件：两者都只能在函数组件中使用。
3. 重新渲染：当状态发生变化时，都会引起组件的重新渲染。
4. API 相似：它们的使用方法和 API 设计上有一定的相似之处，都需要一个初始状态，并返回当前状态和一个更新状态的方法。

区别

用法

• useState 是一个基本的状态管理 Hook，适用于简单的状态管理。用法非常直观：

  const [state, setState] = useState(initialState);

• useReducer 更适合复杂状态的管理，尤其是状态逻辑涉及多个子值或需要根据特定的动作进行状态更新时：

  const [state, dispatch] = useReducer(reducer, initialState);

状态更新逻辑

• useState 直接通过 setState 更新状态，适合简单的值更新：

  setState(newState);

• useReducer 通过 dispatch 分发 action，然后由 reducer 函数根据 action 类型决定如何更新状态，适合复杂的状态更新逻辑：

  const reducer = (state, action) => {
    switch (action.type) {
      case "increment":
        return { count: state.count + 1 };
      case "decrement":
        return { count: state.count - 1 };
      default:
        throw new Error();
    }
  };

适用场景

• useState 适合简单的状态管理，例如单一的布尔值、数字、字符串或简单对象：

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

• useReducer 适合复杂的状态管理，尤其是涉及多个子状态或复杂逻辑的情况，例如表单状态、多步骤流程等：

  const initialState = { count: 0 };
  const [state, dispatch] = useReducer(reducer, initialState);

可读性和可维护性

• 对于简单的状态，useState 更简洁，代码更易读。
• 对于复杂的状态，useReducer 通过清晰的 action 类型和 reducer 函数，可以使状态管理逻辑更加明确和可维护。