React中如何用计算字段替代依赖状态与Props的回调函数

要把组件里的回调函数换成计算字段，核心是简化冗余的函数包装，用响应式的计算变量替代需要调用的回调，具体重构如下：

重构思路 #

1. 移除getTotalQuantityRemaining、getTotalQuantityPending这类仅返回属性的冗余函数，直接引用groupMed的对应属性，这就是最直接的计算字段形式。
2. 对于需要逻辑计算的refillsRemaining，用React的useMemo将其包装成响应式常量，既缓存计算结果优化性能，又能随依赖变化自动更新。

重构后的完整代码 #

import { useMemo } from 'react';
import { useSelector } from 'react-redux';

export interface MStatusProps { index: number; groupMed: GroupMed; }

const MStatus: React.FC<MStatusProps> = ({ index, groupMed }) => {
    const priceOptionsState = useSelector((state: ApplicationState) => state.mstate.priceOptions);
    // 原代码中id未定义，此处假设为groupMed的id属性，请根据实际情况调整
    const targetId = groupMed.id;

    // 计算字段：用useMemo缓存计算结果，替代原回调函数
    const refillsRemaining = useMemo<number | null>(() => {
        if (!priceOptionsState.loading && priceOptionsState.errors.length === 0) {
            const daysSupply = priceOptionsState.data?.[targetId]?.daysSupply;
            if (daysSupply) {
                // 直接使用groupMed的属性，替代原回调函数
                const totalAvailable = groupMed.totalQuantityRemaining + groupMed.getTotalQuantityPending;
                return totalAvailable / daysSupply;
            }
            return null;
        }
        return null;
    }, [
        priceOptionsState.loading,
        priceOptionsState.errors,
        priceOptionsState.data,
        targetId,
        groupMed.totalQuantityRemaining,
        groupMed.getTotalQuantityPending
    ]);

    // 组件渲染逻辑示例
    return (
        <div>剩余配药量: {refillsRemaining ?? '暂无数据'}</div>
    );
};

export default MStatus;

关键说明 #

• 简化属性访问：原有的两个回调函数只是简单返回groupMed的属性，直接引用属性更简洁，避免不必要的函数调用。
• 响应式计算缓存：useMemo确保只有当依赖数组中的变量（比如priceOptionsState的状态、groupMed的属性）变化时，才重新计算refillsRemaining，避免每次渲染都重复执行计算逻辑。
• 依赖数组完整性：务必把所有影响计算结果的变量都加入useMemo的依赖数组，否则会导致计算值不更新的问题。

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