当前位置：首页 > article >正文

深入理解 React 状态管理：useState 和 useReducer

article 2025/1/16 2:45:41

在 React 中，状态是决定组件如何渲染的重要因素。通过 React 的 useState 和 useReducer 钩子，我们能够轻松管理组件的状态

2.1. 使用 useState 管理状态

useState 是 React 中最基础的状态管理钩子。它允许我们在函数组件中添加状态。以下是一个基本示例：

。本篇博客将帮助你深入理解这两种常用的状态管理方式。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

在这个例子中，count 是当前的状态值，setCount 是用来更新状态的函数。

2.2. 使用 useReducer 管理复杂状态

当组件的状态变得复杂时，useState 可能不再足够。在这种情况下，useReducer 是一种更适合的选择。它类似于 Redux 中的 reducer 函数，可以帮助我们管理复杂的状态逻辑

import React, { useReducer } from 'react';

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:
      return state;
  }
}

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

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

export default Counter;