自定义React Hook中维护多个state值的简洁实现方案咨询

这里提供3种不同复杂度的优雅实现，可根据项目场景选择：

方案1：单对象合并状态（原生无依赖，最通用） #

把所有模态框相关的状态收敛到单个对象中管理，同时封装局部更新和重置方法，返回值从10个缩减到3个，写法最简洁：

import { useState } from 'react';

function useNotesModal() {
  const [modalState, setModalState] = useState({
    showModal: false,
    modalNoteId: 0,
    modalNoteTitle: "",
    modalNoteDescription: "",
    modalNoteTagIds: []
  });

  // 支持传入部分属性批量更新
  const updateModalState = (partial) => {
    setModalState(prev => ({ ...prev, ...partial }));
  };

  // 关闭模态框时一键重置所有状态，避免残留旧数据
  const resetModal = () => {
    setModalState({
      showModal: false,
      modalNoteId: 0,
      modalNoteTitle: "",
      modalNoteDescription: "",
      modalNoteTagIds: []
    });
  };

  return { modalState, updateModalState, resetModal };
}
export default useNotesModal;

使用示例：

const { modalState, updateModalState, resetModal } = useNotesModal();
// 读状态：modalState.showModal、modalState.modalNoteTitle
// 改状态：updateModalState({ showModal: true, modalNoteId: 101 })
// 重置：resetModal()

方案2：useReducer管理（适合逻辑复杂的场景） #

如果模态框的操作逻辑固定（比如打开新建、打开编辑、关闭等固定操作），用useReducer把所有状态变更逻辑收敛到reducer函数中，后续维护更清晰：

import { useReducer } from 'react';

const initialState = {
  showModal: false,
  modalNoteId: 0,
  modalNoteTitle: "",
  modalNoteDescription: "",
  modalNoteTagIds: []
};

function modalReducer(state, action) {
  switch (action.type) {
    case 'OPEN_CREATE':
      return { ...initialState, showModal: true };
    case 'OPEN_EDIT':
      return { ...action.payload, showModal: true };
    case 'UPDATE_FIELD':
      return { ...state, ...action.payload };
    case 'RESET':
      return initialState;
    default:
      throw new Error(`未知操作类型: ${action.type}`);
  }
}

function useNotesModal() {
  const [modalState, modalDispatch] = useReducer(modalReducer, initialState);
  return { modalState, modalDispatch };
}
export default useNotesModal;

使用示例：

const { modalState, modalDispatch } = useNotesModal();
// 打开新建模态框：modalDispatch({ type: 'OPEN_CREATE' })
// 打开编辑模态框：modalDispatch({ type: 'OPEN_EDIT', payload: { modalNoteId: 1, modalNoteTitle: '旧标题' } })
// 更新字段：modalDispatch({ type: 'UPDATE_FIELD', payload: { modalNoteTitle: '新标题' } })
// 重置：modalDispatch({ type: 'RESET' })

方案3：useImmer简化不可变更新（适合已引入Immer的项目） #

如果项目已经接入Immer，可使用useImmer避免写大量展开运算符，嵌套属性更新更方便：

import { useImmer } from 'use-immer';

function useNotesModal() {
  const [modalState, updateModalState] = useImmer({
    showModal: false,
    modalNoteId: 0,
    modalNoteTitle: "",
    modalNoteDescription: "",
    modalNoteTagIds: []
  });

  const resetModal = () => {
    updateModalState(draft => {
      draft.showModal = false;
      draft.modalNoteId = 0;
      draft.modalNoteTitle = "";
      draft.modalNoteDescription = "";
      draft.modalNoteTagIds = [];
    });
  };

  return { modalState, updateModalState, resetModal };
}

使用示例：

// 直接修改draft即可完成状态更新，无需展开对象
updateModalState(draft => {
  draft.modalNoteTitle = '新标题';
  draft.modalNoteTagIds.push(202);
});

内容的提问来源于stack exchange，提问作者Peter Kellner