useReducer

2301_81708010

已于 2025-02-13 10:43:56 修改

阅读量1.2k

点赞数 11

文章标签：前端 javascript 开发语言

于 2025-02-12 11:07:56 首次发布

本文链接：https://blog.youkuaiyun.com/2301_81708010/article/details/145587891

版权

useReducer 是 React 提供的一个 Hook，用于管理复杂的状态逻辑。它类似于 Redux 中的 reducer，允许你通过一个集中的逻辑函数来管理状态的变化。useReducer 特别适合处理状态更新逻辑复杂、状态之间存在依赖关系，或者需要共享状态逻辑的场景。

语法

jsx

复制

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

reducer: 一个纯函数，接收当前状态和一个动作（action），返回新的状态。
initialState: 状态的初始值。
state: 当前的状态。
dispatch: 一个函数，用于触发状态更新。它接收一个动作（action）作为参数。

Reducer 函数

Reducer 是一个纯函数，形式如下：

jsx

复制

function reducer(state, action) {
  switch (action.type) {
    case 'ACTION_TYPE_1':
      return newState;
    case 'ACTION_TYPE_2':
      return newState;
    default:
      return state;
  }
}

state: 当前的状态。
action: 一个对象，通常包含一个 type 字段（表示动作类型）和一个可选的 payload 字段（传递数据）。
返回值: 新的状态。

总结

useReducer 是 React 中用于管理复杂状态逻辑的强大工具。它通过将状态和状态更新逻辑分离，使代码更清晰、更易维护。如果你发现 useState 难以应对复杂的状态管理需求，useReducer 是一个很好的替代方案。

例

1. 计数器示例

jsx

复制

import React, { useReducer } from 'react';

// 定义 reducer 函数
function counterReducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  // 使用 useReducer
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  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;

2. 表单状态管理

jsx

复制

import React, { useReducer } from 'react';

// 定义 reducer 函数
function formReducer(state, action) {
  switch (action.type) {
    case 'SET_FIELD':
      return { ...state, [action.field]: action.value };
    case 'RESET':
      return { username: '', password: '' };
    default:
      return state;
  }
}

function Form() {
  // 使用 useReducer
  const [state, dispatch] = useReducer(formReducer, { username: '', password: '' });

  const handleChange = (e) => {
    dispatch({
      type: 'SET_FIELD',
      field: e.target.name,
      value: e.target.value,
    });
  };

  const handleReset = () => {
    dispatch({ type: 'RESET' });
  };

  return (
    <form>
      <input
        name="username"
        value={state.username}
        onChange={handleChange}
        placeholder="Username"
      />
      <input
        name="password"
        value={state.password}
        onChange={handleChange}
        placeholder="Password"
      />
      <button type="button" onClick={handleReset}>
        Reset
      </button>
    </form>
  );
}

export default Form;

与 `useState` 的区别

特性	`useState`	`useReducer`
适用场景	简单的状态管理	复杂的状态逻辑
状态更新逻辑	直接更新状态	通过 reducer 函数集中管理
代码组织	状态和更新逻辑分散	状态和更新逻辑集中
性能优化	适合简单场景	适合频繁更新或复杂依赖的场景
可读性	简单直观	更适合复杂逻辑，代码更易维护