useReducer和useState怎么选？多字段状态怎么管？

一、底层机制与心智模型的本质差异

在 React 函数组件中，useState 和 useReducer 并不是互斥的两个技术孤岛，官方甚至在源码底层直接通过 useReducer 实现了 useState。然而，二者在日常业务开发中承载的心智模型截然不同：

• useState 的心智是“直接赋值”：事件回调直接决定要将状态改为什么新值。修改逻辑分散在各个 JSX 交互函数中，组件既要监听行为，又要负责计算数据。
• useReducer 的心智是“意图派发”：事件回调只负责宣告发生了什么事情（Action），具体状态怎么转移、相关字段怎么联动，全部交由外部的纯函数（Reducer）集中裁决。

当组件只需要记录一两个独立的开关、或者一个简单的单选框时，useState 是毫无疑问的首选，它不需要声明额外的 Action 常量与分发逻辑。但是，一旦状态对象包含多个字段，并在同一操作中相互牵扯，把所有合并逻辑塞在组件回调中就会带来维护灾难。

二、多字段状态管理的三种典型解法与演进路径

在实际项目面对多个字段（例如包含姓名、邮箱、密码、确认密码、同意协议、提交状态）时，前端工程师通常经历三种管理方式的演进：

解法 1：拆分为多个独立的 useState

function UserForm() {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [bio, setBio] = useState('');

  // 独立更新，互不干扰
  const handleNameChange = (e) => setUsername(e.target.value);
}

适用场景：各个字段之间完全没有相互依赖，生命周期彼此独立。例如页面顶部的搜索关键词、分页组件的当前页码与每页条数。
局限：字段增多时组件顶部出现长串 useState；若需要“重置整个表单”，必须逐个调用对应的 Setter 函数，不仅繁琐，还容易漏写。

解法 2：单一对象 useState + 展开合并

function UserForm() {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: '',
    confirmPassword: '',
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    // 浅拷贝覆盖更新
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }));
  };
}

适用场景：多个字段仅用于纯展示或最终一次性打包提交，字段之间没有任何复杂的联动与中间状态计算。
典型陷阱：

1. 浅合并遗漏深层属性：如果表单对象存在嵌套（如 profile.address.city），展开运算符 ...prev 无法深层保护，极易发生深层数据被整体覆盖的 Bug。
2. 闭包与异步联动陷阱：如果修改 password 必须即时重置 confirmPassword 的报错信息，开发者容易在回调中写成多次依赖当前快照的操作，导致读取到旧的状态引用。
3. 业务规则散落：一旦某个字段需要条件校验，handleChange 函数内就会充斥着冗长的 if/else 或 switch，组件内部变得臃肿不堪。

解法 3：状态机化管理 —— useReducer

当多字段之间存在联动逻辑、依赖前一刻状态进行推导、或者需要统一重置与多步骤控制时，使用 useReducer 可以将状态逻辑完全抽离为独立的纯函数。

三、实战演练：复杂表单的多字段完整重构

下面是一个经典的注册向导场景：包含用户名、密码、确认密码、用户条款勾选、当前向导步骤（Step）、加载状态及错误信息集合。以下展示标准的 useReducer 实现：

import React, { useReducer } from 'react';

// 1. 明确初始状态
const initialFormState = {
  username: '',
  password: '',
  confirmPassword: '',
  agreeTerms: false,
  step: 1,
  isSubmitting: false,
  errors: {},
};

// 2. 纯函数 Reducer：集中管理多字段流转与校验
function registerReducer(state, action) {
  switch (action.type) {
    case 'FIELD_CHANGE': {
      const { field, value } = action.payload;
      return {
        ...state,
        [field]: value,
        // 当修改密码时，若确认密码已有输入，联动清理不匹配错误
        errors: {
          ...state.errors,
          [field]: undefined,
          ...(field === 'password' ? { confirmPassword: undefined } : {}),
        },
      };
    }

    case 'TOGGLE_TERMS': {
      return {
        ...state,
        agreeTerms: !state.agreeTerms,
        errors: { ...state.errors, terms: undefined },
      };
    }

    case 'NEXT_STEP': {
      const nextErrors = {};
      if (!state.username.trim()) nextErrors.username = '用户名不能为空';
      if (state.password.length < 6) nextErrors.password = '密码长度不可小于6位';
      if (state.password !== state.confirmPassword) nextErrors.confirmPassword = '两次密码输入不一致';

      if (Object.keys(nextErrors).length > 0) {
        return { ...state, errors: nextErrors };
      }
      return { ...state, step: 2, errors: {} };
    }

    case 'PREV_STEP': {
      return { ...state, step: 1 };
    }

    case 'SUBMIT_START': {
      if (!state.agreeTerms) {
        return { ...state, errors: { terms: '请先勾选并同意服务条款' } };
      }
      return { ...state, isSubmitting: true, errors: {} };
    }

    case 'SUBMIT_SUCCESS': {
      return initialFormState; // 原子重置回初始状态
    }

    case 'SUBMIT_ERROR': {
      return {
        ...state,
        isSubmitting: false,
        errors: { submit: action.payload },
      };
    }

    case 'RESET': {
      return initialFormState;
    }

    default:
      return state;
  }
}

在组件中使用此 Reducer 时，UI 层代码极其干净。表单内的输入组件只负责派发行为，完全不需要关心复杂的验证规则与步骤控制：

export function RegisterWizard() {
  const [state, dispatch] = useReducer(registerReducer, initialFormState);

  const handleSubmit = async (e) => {
    e.preventDefault();
    dispatch({ type: 'SUBMIT_START' });
    try {
      // 执行异步请求...
      dispatch({ type: 'SUBMIT_SUCCESS' });
    } catch (err) {
      dispatch({ type: 'SUBMIT_ERROR', payload: err.message });
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {state.step === 1 ? (
        <>
          <input
            value={state.username}
            onChange={(e) => dispatch({
              type: 'FIELD_CHANGE',
              payload: { field: 'username', value: e.target.value }
            })}
            placeholder="用户名"
          />
          {state.errors.username && <span class="err">{state.errors.username}</span>}

          <input
            type="password"
            value={state.password}
            onChange={(e) => dispatch({
              type: 'FIELD_CHANGE',
              payload: { field: 'password', value: e.target.value }
            })}
            placeholder="密码"
          />

          <input
            type="password"
            value={state.confirmPassword}
            onChange={(e) => dispatch({
              type: 'FIELD_CHANGE',
              payload: { field: 'confirmPassword', value: e.target.value }
            })}
            placeholder="确认密码"
          />
          {state.errors.confirmPassword && <span class="err">{state.errors.confirmPassword}</span>}

          <button type="button" onClick={() => dispatch({ type: 'NEXT_STEP' })}>
            下一步
          </button>
        </>
      ) : (
        <>
          <label>
            <input
              type="checkbox"
              checked={state.agreeTerms}
              onChange={() => dispatch({ type: 'TOGGLE_TERMS' })}
            />
            我已阅读并同意用户协议
          </label>
          {state.errors.terms && <span class="err">{state.errors.terms}</span>}

          <button type="button" onClick={() => dispatch({ type: 'PREV_STEP' })}>上一步</button>
          <button type="submit" disabled={state.isSubmitting}>
            {state.isSubmitting ? '正在提交...' : '确认注册'}
          </button>
        </>
      )}
    </form>
  );
}

四、容易混淆的说法与认知辨析

五、全景对比与速查矩阵

为了在日常开发评审与架构选型时快速做出判断，下表系统总结了两种 Hook 在处理多字段状态时的关键差异：