如何重构包含大量handlers与useEffects的大型React组件？

1. 按功能维度拆分自定义Hook #

把逻辑相关的handler和useEffect打包到同一个自定义Hook中，Hook内部直接通过useContext读取所需状态，无需手动传递大量参数。

比如你有处理表格数据加载、分页、筛选的一系列逻辑，就可以封装成useTableControls：

function useTableControls() {
  const { tableData, setTableData, currentPage, pageSize } = useContext(AppContext);
  
  const handlePageChange = (newPage) => {
    fetchTableData(newPage, pageSize).then(setTableData);
  };
  
  const handleFilterChange = (filters) => {
    fetchTableData(1, pageSize, filters).then(setTableData);
  };
  
  useEffect(() => {
    fetchTableData(currentPage, pageSize).then(setTableData);
  }, [currentPage, pageSize]);
  
  return { handlePageChange, handleFilterChange };
}

主组件里只需调用这个Hook，解构出需要的方法即可，不用再堆一堆逻辑代码。

2. 将大Context拆分为多个功能子Context #

原来的单一Context可能包含了全量状态，按功能拆分后（比如拆成UserContext、TableContext、FormContext），每个Context只维护对应模块的状态和方法。

对应的handler和useEffect可以和各自的子Context绑定，比如TableContext的Provider里就负责处理表格相关的所有逻辑，这样每个模块的逻辑都被隔离，主组件也不用再处理跨模块的复杂依赖。

3. 把Handler和副作用逻辑移到Context Provider内部 #

不要在主组件里定义handler，而是把这些函数直接写在Context的Provider组件中，然后将handler和状态一起注入Context。

示例：

const AppContext = createContext();

export function AppProvider({ children }) {
  const [userInfo, setUserInfo] = useState(null);
  const [formData, setFormData] = useState({});
  
  const handleUserUpdate = (newInfo) => {
    updateUserApi(newInfo).then(res => setUserInfo(res.data));
  };
  
  const handleFormSubmit = () => {
    submitFormApi(formData).then(() => {
      setFormData({});
    });
  };
  
  useEffect(() => {
    fetchUserInfo().then(res => setUserInfo(res.data));
  }, []);
  
  return (
    <AppContext.Provider value={{ userInfo, formData, handleUserUpdate, handleFormSubmit }}>
      {children}
    </AppContext.Provider>
  );
}

这样主组件和子组件都能直接从Context获取现成的handler，主组件里再也不用堆积大量逻辑代码。

4. 按视图区域进一步拆分组件 #

如果现有的10个子组件粒度还不够细，可以把某个独立视图区域（比如筛选栏、操作按钮组、详情面板）和对应的逻辑封装成新组件。

比如把“筛选栏”拆成独立的FilterPanel组件，组件内部通过useContext获取所需状态，自己处理筛选相关的handler和useEffect，主组件只需要渲染<FilterPanel />即可，把逻辑从主组件中彻底剥离。

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