React CRUD应用状态逻辑分离方案问询：自定义Hook与Context的适用性探讨

你提到的痛点我太熟悉了——状态提升带来的回调泛滥、组件代码臃肿，尤其是当字段多到20+的时候，每个字段写单独的change handler简直是灾难。咱们一步步拆解你的问题：

1. 自定义Hook能否实现跨组件状态共享？ #

直接用自定义Hook的话，每个组件调用Hook都会创建独立的状态副本，默认是没法共享数据视图的。但如果把Hook的状态放到Context里，再通过Hook封装Context的访问逻辑，就能实现跨组件的状态共享和更新感知了。

简单来说：用Context托管全局/跨组件共享的状态，用自定义Hook封装Context的读写、业务逻辑，这样所有消费这个Hook的组件都能拿到同一份状态，状态更新时也会同步触发渲染。

2. 如何处理大量字段的变更回调？ #

不用给每个字段写单独的handleXXXChange！可以封装一个通用的字段更新函数，支持嵌套路径（比如name.en、title.es这类多语言字段），彻底告别回调地狱。

比如在自定义Hook里实现一个updateField函数，用法像这样：

updateField('name.en', e.target.value)
updateField('code', e.target.value)
updateField('enabled', e.target.checked)

不管有多少字段，都只用这一个函数搞定。

3. 结合你的CompanyItem组件的重构示例 #

咱们把你的组件拆成useCompany Hook和精简后的CompanyItem组件，彻底分离状态逻辑与渲染代码：

第一步：编写useCompany自定义Hook（结合Context） #

// useCompany.tsx
import { createContext, useContext, useReducer, useEffect } from 'react';
import { getCompanyByCode, updateCompany, createCompany } from "../../api/companyApi";

// 定义状态类型
interface CompanyState {
  company: CompanyItemDetailModel;
  isLoading: boolean;
  tabValue: number;
  saveGraphics: boolean;
}

// 定义action类型
type CompanyAction =
  | { type: 'SET_COMPANY', payload: CompanyItemDetailModel }
  | { type: 'SET_LOADING', payload: boolean }
  | { type: 'UPDATE_FIELD', payload: { path: string, value: any } }
  | { type: 'SET_TAB_VALUE', payload: number }
  | { type: 'SET_SAVE_GRAPHICS', payload: boolean };

// 初始状态
const initialState: CompanyState = {
  company: {
    code: "",
    name: { en: "", es: "" },
    title: { en: "", es: "" },
    description: { en: "", es: "" },
    displayOrder: 0,
    enabled: false,
  },
  isLoading: true,
  tabValue: 0,
  saveGraphics: false,
};

// reducer函数统一处理状态更新
function companyReducer(state: CompanyState, action: CompanyAction): CompanyState {
  switch (action.type) {
    case 'SET_COMPANY':
      return { ...state, company: action.payload };
    case 'SET_LOADING':
      return { ...state, isLoading: action.payload };
    case 'UPDATE_FIELD': {
      // 处理嵌套字段更新的通用逻辑
      const setNestedField = (obj: any, path: string[], value: any) => {
        if (path.length === 1) {
          return { ...obj, [path[0]]: value };
        }
        return {
          ...obj,
          [path[0]]: setNestedField(obj[path[0]], path.slice(1), value)
        };
      };
      return {
        ...state,
        company: setNestedField(state.company, action.payload.path.split('.'), action.payload.value)
      };
    }
    case 'SET_TAB_VALUE':
      return { ...state, tabValue: action.payload };
    case 'SET_SAVE_GRAPHICS':
      return { ...state, saveGraphics: action.payload };
    default:
      return state;
  }
}

// 创建Context
const CompanyContext = createContext<{
  state: CompanyState;
  dispatch: React.Dispatch<CompanyAction>;
  fetchCompany: (code: string) => Promise<void>;
  saveCompany: (code: string, onSaveComplete: () => void) => Promise<void>;
} | undefined>(undefined);

// Provider组件，托管状态和业务逻辑
export function CompanyProvider({ children }: { children: React.ReactNode }) {
  const [state, dispatch] = useReducer(companyReducer, initialState);

  // 获取公司详情
  const fetchCompany = async (code: string) => {
    try {
      dispatch({ type: 'SET_LOADING', payload: true });
      const payload = await getCompanyByCode(code);
      dispatch({ type: 'SET_COMPANY', payload });
    } catch (e) {
      console.log(e);
    } finally {
      dispatch({ type: 'SET_LOADING', payload: false });
    }
  };

  // 保存公司
  const saveCompany = async (code: string, onSaveComplete: () => void) => {
    const companyToSave = {
      ...state.company,
      name: JSON.stringify(state.company.name),
      description: JSON.stringify(state.company.description),
      title: JSON.stringify(state.company.title),
    };
    try {
      dispatch({ type: 'SET_SAVE_GRAPHICS', payload: true });
      code.length > 0 ? await updateCompany(companyToSave as any) : await createCompany(companyToSave as any);
      onSaveComplete();
    } catch (e) {
      console.log(e);
    }
  };

  return (
    <CompanyContext.Provider value={{ state, dispatch, fetchCompany, saveCompany }}>
      {children}
    </CompanyContext.Provider>
  );
}

// 自定义Hook，封装Context访问和便捷方法
export function useCompany() {
  const context = useContext(CompanyContext);
  if (!context) {
    throw new Error('useCompany must be used within a CompanyProvider');
  }
  const { state, dispatch, fetchCompany, saveCompany } = context;

  // 暴露便捷的字段更新函数
  const updateField = (path: string, value: any) => {
    dispatch({ type: 'UPDATE_FIELD', payload: { path, value } });
  };

  const setTabValue = (value: number) => {
    dispatch({ type: 'SET_TAB_VALUE', payload: value });
  };

  return {
    ...state,
    updateField,
    setTabValue,
    fetchCompany,
    saveCompany,
  };
}

第二步：重构CompanyItem组件 #

现在组件只需要处理渲染逻辑，所有状态和业务逻辑都交给useCompany Hook：

// CompanyItem.tsx
import { useEffect } from 'react';
import { useCompany } from "./useCompany";
import { useStyles } from './styles';

export interface CompanyItemProps {
  onDetailsDialogCloseHandler: DetailsCancelHandler;
  companyCode: string;
  onSaveHandler: () => void;
}

const CompanyItem = (props: CompanyItemProps) => {
  const { companyCode, onDetailsDialogCloseHandler, onSaveHandler } = props;
  const classes = useStyles();
  const {
    company,
    isLoading,
    tabValue,
    updateField,
    setTabValue,
    fetchCompany,
    saveCompany
  } = useCompany();

  // 监听companyCode变化，自动获取公司详情
  useEffect(() => {
    if (companyCode.length > 0) {
      fetchCompany(companyCode);
    }
  }, [companyCode, fetchCompany]);

  const handleTabChange = (e: React.ChangeEvent<{}>, newValue: number) => {
    setTabValue(newValue);
  };

  const detailsDialogSaveHandler = async () => {
    await saveCompany(companyCode, onSaveHandler);
  };

  const detailsDialogCloseHandler = (e: React.MouseEvent) => {
    onDetailsDialogCloseHandler(e);
  };

  return (
    <DetailsDialog>
      <div className={classes.root}>
        <Form>
          <ModalHeader
            name={company.name}
            languageCode="en"
            onTabChange={handleTabChange}
            onCancelHandler={detailsDialogCloseHandler}
            onSaveHandler={detailsDialogSaveHandler}
            tabTypes={[
              DetailsTabTypes.Details,
              DetailsTabTypes.Images,
            ]}
          />
          <TabPanel value={tabValue} index={0} dialog={true}>
            <CompanyDetailsTab
              details={company}
              isEditMode={companyCode.length > 1}
              languageCode="en"
              // 所有变更都用通用的updateField
              handleNameTextChange={(e) => updateField('name.en', e.target.value)}
              handleCompanyCodeTextChange={(e) => updateField('code', e.target.value)}
              handleEnabledCheckboxChange={(e) => updateField('enabled', e.target.checked)}
              handleTitleTextChange={(e) => updateField('title.en', e.target.value)}
              handleDescriptionTextChange={(e) => updateField('description.en', e.target.value)}
            />
          </TabPanel>
          <TabPanel value={tabValue} index={1} dialog={true}>
            <ImageList />
          </TabPanel>
        </Form>
      </div>
    </DetailsDialog>
  );
};

export default CompanyItem;

4. Context vs 自定义Hook的场景选择 #

• 只用自定义Hook：如果状态只在单个组件或父子组件内共享（比如只有CompanyItem和它的子组件使用），不需要跨多层或无关组件共享，单独的自定义Hook就足够了（注意：每个组件调用Hook会生成独立状态）。
• 自定义Hook + Context：如果多个不相关组件（比如列表组件和模态框）需要共享同一份状态，或者状态需要跨多层组件传递，结合Context是最佳方案，能彻底避免props drilling和状态提升带来的回调混乱。

额外优化建议 #

• 针对多语言字段，可以再封装updateLocalizedField函数，比如updateLocalizedField('name', 'en', value)，进一步简化调用。
• 不想手写嵌套字段更新逻辑的话，可以用lodash.set或ramda.set这类工具库，减少重复代码。
• 可以在Hook里添加错误状态管理，把错误信息放到Context中，方便组件展示错误提示。

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