如何提取自定义Hook中的重复函数实现复用？

1. 保留公共函数定义（/common/tableUtils.ts） #

你提取的公共函数没问题，它是一个纯函数，接收所有必要参数：

export function handleOnColumnSortChange(
    columnName: string,
    order: any,
    changeColumnSorting: any,
    filters: any,
    setFilters: (data: any) => void
) {
    changeColumnSorting?.(columnName, order);
    const newFilters = {
        ...filters,
        sorting: { [columnName]: order },
    };
    setFilters(newFilters);
}

2. 在自定义Hook中包装公共函数 #

在每个需要复用的Hook里，用useCallback把公共函数包装成表格要求的回调格式（只接收columnName和order），同时把Hook内部的依赖项绑定进去：

import { useState, useCallback } from 'react';
import { handleOnColumnSortChange as commonSortHandler } from '../common/tableUtils';

export function useMyHook({ changeColumnSorting }) {
    const [filters, setFilters] = useState();

    // 生成符合表格调用要求的回调
    const handleOnColumnSortChange = useCallback(
        (columnName: string, order: any) => {
            // 调用公共函数，传入所有必要参数
            commonSortHandler(columnName, order, changeColumnSorting, filters, setFilters);
        },
        [changeColumnSorting, filters, setFilters] // 依赖项变化时重新生成回调
    );

    return {
        sorting: filters?.sorting,
        filters,
        handleOnColumnSortChange
    };
}

3. 组件调用无需修改 #

之前的组件使用代码完全不用改，因为包装后的handleOnColumnSortChange和原函数签名一致，表格依然可以正常传入columnName和order：

const { handleOnColumnSortChange} = useMyHook({ changeColumnSorting });

<Table handleOnColumnSortChange={handleOnColumnSortChange} />

关键点说明 #

• useCallback用于缓存回调函数，避免依赖项未变化时触发表格组件不必要的重渲染。
• 公共函数是纯函数，不依赖外部上下文，只靠传入的参数工作，在多个Hook中复用不会产生副作用。
• 后续要修改排序逻辑时，只需要调整公共文件里的函数，所有用到的Hook会同步更新。

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