React中跨组件复用大量通用方法逻辑的最佳实践方案

你当前采用的「组件外部声明通用业务函数、调用时传入组件this来访问state/props实现复用」的方案，不是React生态的最佳实践，存在三个无法规避的问题：

• 隐式依赖极强：外部函数默认要求传入的组件实例必须带指定的state字段、props、实例方法，只要某个组件调整了state命名、嵌套结构，复用该函数的所有组件都可能抛错，且静态类型检查很难提前捕获这类问题——毕竟你传的是整个组件实例，外部函数内部访问了哪些属性完全黑盒
• 违反React状态更新约定：外部函数拿到this后可以随意修改state、触发生命周期，很容易出现状态更新丢批次、闭包引用旧值、和组件自身逻辑冲突的问题
• 调试成本极高：你无法通过全局搜索快速定位是哪段逻辑修改了某个特定state，出问题时要挨个排查所有传入过this的外部函数，中大型项目里维护成本会指数级上升

根据你的复用场景，按优先级选对应方案即可：

1. 单组件/关联组件的逻辑复用：自定义Hook #

这是React 16.8+版本的首选方案，完全贴合React的数据流设计，不需要传递组件实例，没有黑盒依赖。
以你提到的save/add/delete/redo/view通用逻辑为例，抽离方式如下：

import { useState, useCallback } from 'react';
// 抽离通用CRUD逻辑为自定义Hook
function useCRUD(initialList = []) {
  const [list, setList] = useState(initialList);
  const [undoStack, setUndoStack] = useState([]);

  const add = useCallback((newItem) => {
    setUndoStack(prev => [...prev, structuredClone(list)]);
    setList(prev => [...prev, { id: Date.now(), ...newItem }]);
  }, [list]);

  const save = useCallback((id, updatedData) => {
    setUndoStack(prev => [...prev, structuredClone(list)]);
    setList(prev => prev.map(item => item.id === id ? { ...item, ...updatedData } : item));
  }, [list]);

  const remove = useCallback((id) => {
    setUndoStack(prev => [...prev, structuredClone(list)]);
    setList(prev => prev.filter(item => item.id !== id));
  }, [list]);

  const redo = useCallback(() => {
    if (!undoStack.length) return;
    const lastSnapshot = undoStack.at(-1);
    setUndoStack(prev => prev.slice(0, -1));
    setList(lastSnapshot);
  }, [undoStack]);

  const getDetail = useCallback((id) => {
    return list.find(item => item.id === id);
  }, [list]);

  return { list, add, save, remove, redo, getDetail };
}

// 业务组件中直接调用即可，不需要传this
function UserManagePage() {
  // 直接拿到需要的状态和方法，组件自身的其他逻辑不受影响
  const { list, add, save, remove, redo, getDetail } = useCRUD([]);
  // 其余页面逻辑、渲染正常编写
  return <div className="page">{/* 页面内容 */}</div>
}

如果你维护的是老版本类组件项目，不要传this，用高阶组件（HOC）把通用逻辑封装后注入到组件props中使用，逻辑和自定义Hook等价。

2. 跨多页面/跨层级共享的逻辑：状态管理方案 #

如果这些通用操作需要在多个无关联页面、多层嵌套组件间共享状态，直接用状态管理方案承接逻辑即可：

• 简单共享场景用React内置的Context+useReducer就能覆盖，把通用操作封装为reducer方法，组件通过context拿到触发方法即可
• 复杂中后台场景可以选用成熟的状态管理库，把通用CRUD逻辑抽为统一的action/state模块，所有状态变更可追溯、可调试，完全不需要传递组件实例。

3. 无状态通用逻辑：纯工具函数 #

如果部分逻辑完全不依赖组件状态、生命周期（比如表单数据格式化、参数校验、时间处理这类纯计算逻辑），可以抽为独立的工具函数，但要注意：只传入函数需要的具体参数，绝对不要传整个组件this。

// 正确：只传入需要处理的值，无隐式依赖
function formatSubmitData(formData, currentUserId) {
  return {
    ...formData,
    updateAt: Date.now(),
    operator: currentUserId
  }
}

// 错误：传入整个this，隐式依赖组件内部结构
function badFormatData(componentThis) {
  return {
    ...componentThis.state.formData,
    updateAt: Date.now(),
    operator: componentThis.props.currentUser.id
  }
}

如果项目存在历史包袱，没法立刻全量重构现有传this的逻辑，至少要做两个约束避免问题持续扩大：

• 禁止外部函数直接修改组件实例的state、强制触发组件更新，外部函数只做逻辑计算，返回需要更新的新状态值，由组件自身调用setState完成更新
• 禁止传递整个this实例，只把外部函数实际需要用到的state值、props值、回调方法作为明确参数传入，消除黑盒依赖

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